Bootstrap logo

Create A Sidebar With Bootstrap 3

Posted by Weston Ganger on April 21, 2015

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;
  }
}


Related External Links:


Posted in HTML / CSS and Tagged with bootstrap sidebar css fixed 


Need help on your next project or application?

I specialize in Ruby-on-Rails, AngularJS, Javascript, Bootstrap, and Hybrid Mobile Apps with Cordova & Ionic.

Contact Me

Recommended Posts