Test Bootstrap

by Simon Gamester

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<header>
  <!-- Top Bar -->
  <div class="row">
    <div class="col-8">
      LOGO PulseTile
    </div>
    <div class="col-4">
    Search / Logout
    </div>
  </div>

  <!-- Header -->
  <div class="row">
    <div class="col-3">
      Close
    </div>
    <div class="col-9">
       Patient Info
    </div>
  </div>
</header>

<div class="main">

  <div class="row">
  
    <aside class="col-3">
      <ul>
        <li><a href="">Patient Summary</a></li>
        <li><a href="">Patient Summary</a></li>
        <li><a href="">Patient Summary</a></li>
        <li><a href="">Patient Summary</a></li>
      </ul>
    </aside>
    
    <sidebar-nav>
      <list-item>Patient Summary</list-item>
      <list-item>Patient Summary</list-item>
      <list-item>Patient Summary</list-item>
      <list-item>Patient Summary</list-item>
      <list-item>Patient Summary</list-item>
    </sidebar-nav>
    
    <div class="col-9">
    
      <nav class="breadcrumb">
        <a href="">Home</a>
        <a href="">Patient Summary</a>
      </nav>
      
      
      <main-area>
        
        <left-column>
          <our-table>
            
          </our-table>
          <our-panel>
            <header>
              
            </header>
            <data-list>
              
            </data-list>
          </our-panel>
        </left-column>
        
      </main-area>
      
      <div class="row text-center">
        <div class="widget col-3">
          Widget 1
        </div>
        <div class="widget col-3">
          Widget 1
        </div>
        <div class="widget col-3">
          Widget 1
        </div>
     ...

SCSS

$colour: #eee;

.main {
  min-height: 100%;
  
  .widget {
    background-color: $colour;
    margin-bottom: 20px;
  }
}