Create a fixed sidebar next to the bootstrap 3 centered mesh

Question

I would like to create a fixed sidebar that exists outside of my centered Bootstrap grid. The problem that I encounter when trying to do this is to determine what additional styles to apply / overwrite to my .container so that it does not overlap my sidebar when changing the screen size.

For starters, I use only part of the css frame grid, so .container , .row and .col-md-12 are code extracted from the bootstrap.css file itself and is not ordinary. Also keep in mind that I'm using Bootstrap 3 , so please, no suggestions regarding the fluid grid solution for Bootstrap 2, which is often asked in previous threads.

HTML

 <div id="left-nav"></div> <div class="container"> <div class="row"> <div class="col-md-12"> <p>Lorem ipsum dolor sit amet, nunc dictum at.</p> </div> </div> </div> 

CSS

 html, body { height: 100%; width: 100%; } #left-nav { background: #2b2b2b; position: absolute; top: 0px; left: 0px; height: 100%; width: 250px; } 

Answer 1

As drew_w said , you can find a good example here .

HTML

 <div id="wrapper"> <div id="sidebar-wrapper"> <ul class="sidebar-nav"> <li class="sidebar-brand"><a href="#">Home</a></li> <li><a href="#">Another link</a></li> <li><a href="#">Next link</a></li> <li><a href="#">Last link</a></li> </ul> </div> <div id="page-content-wrapper"> <div class="page-content"> <div class="container"> <div class="row"> <div class="col-md-12"> <!-- content of page --> </div> </div> </div> </div> </div> </div> 

CSS

 #wrapper { padding-left: 250px; transition: all 0.4s ease 0s; } #sidebar-wrapper { margin-left: -250px; left: 250px; width: 250px; background: #CCC; position: fixed; height: 100%; overflow-y: auto; z-index: 1000; transition: all 0.4s ease 0s; } #page-content-wrapper { width: 100%; } .sidebar-nav { position: absolute; top: 0; width: 250px; list-style: none; margin: 0; padding: 0; } @media (max-width:767px) { #wrapper { padding-left: 0; } #sidebar-wrapper { left: 0; } #wrapper.active { position: relative; left: 250px; } #wrapper.active #sidebar-wrapper { left: 250px; width: 250px; transition: all 0.4s ease 0s; } } 

JSFIDDLE