bootstrap 3.0 full length body sidebar

html, responsive-design, sidebar, twitter-bootstrap-3

Solution

The key is to understand the "col-md-x" and "col-md-offset-x" styles provided by Bootstrap 3:

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

Then use CSS to make sure the breakpoints line-up. You'll need to fine-tune padding/margin for your particular needs, but the offset and @media breakpoints handle the overall layout pretty well:

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

Working solution: http://www.bootply.com/111837

If you use "col-sm-x" or "col-lg-x" you just change the @media CSS to the corresponding min-width (768px for sm and 1200px for lg). Bootstrap handles the rest.

Problem

I'm trying to get bootstrap divs to be full body length. This is what I've tried so far: http://jsfiddle.net/bKsad/315/ ``` html, body { min-height: 100% } .wrap { height: 100% } .sidebar { background-color:#eee; background-repeat: repeat; padding:0; min-height:100% !important; position:relative; } .sidebar .sidebar-content { height:100%; width:100%; padding: 5px; margin:0; position:relative; } ``` As the right column grows longer, I want the sidebar to do the same.

Original source