Standard Bootstrap Layout

by Scott Vandervort

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
          <div class="container-fluid">

            <div class="row"> 

              <div class="col-sm-0 col-md-2 col-lg-1"/>

              <header class="col-sm-12 col-md-10 col-lg-11">
                My Dashboard
              </header>                               

            </div>

            <div class="row content"> 

              <nav class="side-nav col-sm-12 col-md-2 col-lg-1">
                <ul>
                  <li>
                    <span class="glyphicon glyphicon-dashboard"></span>                  
                    <Link to="/">My Dashboard</Link>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-user"></span>
                    <Link to="/accounts">Accounts</Link>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-phone"></span>
                    <Link to="/mobile">Mobile</Link>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-usd"></span>
                    <Link to="/bills">Bills</Link>
                  </li>          
                  <li>
                    <span class="glyphicon glyphicon-fire"></span>
                    <Link to="/complaints">Complaints</Link>
                  </li>                    
                  <li>
                    <span class="glyphicon glyphicon-earphone"></span>
                    <Link to="/customerCare">Customer Care</Link>
                  </li>                              
 ...

CSS

.grow {
    flex: 1;
}

.main {
    overflow-y: auto;
}