Create A Sidebar With Bootstrap 3

Posted By Weston Ganger

Sidebars are made pretty easy with Bootstrap. Heres a small snippet of how to get it done.


<div class="container-fluid">
  <div class="row">
    
    <div class="col-md-3 sidebar">
      Sidebar
    </div>
    
    <div class="col-md-9 col-md-offset-3 content">
      Main Content
    </div>
    
  </div>
</div>


html, body, .container-fluid, .row {
  height: 100%;
}
.sidebar {
  background-color: #CCCCCC;
}

@media (min-width: 992px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    display: block;
    background-color: #CCCCCC;
  }
}