Twitter Bootstrap - Fixed Layout with Scrollable Sidebar

twitter bootstrap scrolling side bar

I realised that this is the solution to my question just I looked at it the wrong way:

Fixed sidebar navigation in fluid twitter bootstrap 2.0

I missed it the first time because I wanted my content/map to be static and the sidebar to scroll. I just added to the html template:

<style type="text/css">
.map-fixed {
    padding: 9x 0;
    position: fixed;
    width : 510;
}
</style>

so in the body of my template I was able to fix the map instead of the sidebar

<div class="container">
  <div class="row">
    <div class="span12">
        <div class="row">
            <div class="span7 map-fixed">
                {{ form.map }}
            </div> 

            <div class="span5 offset7">
                <div>{{ string|safe }}</div>
            </div>  
        </div>  
    </div>  
  </div>  
</div>  

Fixed sidebar navigation in fluid twitter bootstrap 2.0

Note: There is a bootstrap jQuery plugin that does this and so much more that was introduced a few versions after this answer was written (almost two years ago) called Affix. This answer only applies if you are using Bootstrap 2.0.4 or lower.

---

Yes, simply create a new fixed class for your sidebar and add an offset class to your content div to make up for the left margin, like so:

CSS

.sidebar-nav-fixed {
    padding: 9px 0;
    position:fixed;
    left:20px;
    top:60px;
    width:250px;
}

.row-fluid > .span-fixed-sidebar {
    margin-left: 290px;
}

Demo: http://jsfiddle.net/U8HGz/1/show/
Edit here: http://jsfiddle.net/U8HGz/1/

Update

Fixed my demo to support the responsive bootstrap sheet, now it flows with the responsive feature of the bootstrap.

Note: This demo flows with the top fixed navbar, so both elements become position:static upon screen resize, i placed another demo below that maintains the fixed sidebar until the screen drops for mobile view.

CSS

.sidebar-nav-fixed {
     position:fixed;
     top:60px;
     width:21.97%;
 }

 @media (max-width: 767px) {
     .sidebar-nav-fixed {
         width:auto;
     }
 }

 @media (max-width: 979px) {
     .sidebar-nav-fixed {
         position:static;
        width: auto;
     }
 }

HTML

<div class="container-fluid">
<div class="row-fluid">
 <div class="span3">
   <div class="well sidebar-nav sidebar-nav-fixed">
    ...
   </div><!--/.well -->
 </div><!--/span-->
 <div class="span9">
    ...
 </div><!--/span-->
</div><!--/row-->

</div><!--/.fluid-container-->

Demo, edit here.

^{minor note: there is about a 10px/1% difference on the width of the fixed sidebar, its due to the fact that since it doesn't inherit the width from the span3 container div because it is fixed i had to come up with a width. It's close enough.}

And here is another method if you want to keep the sidebar fixed until the grid drops for small screen/mobile view.

CSS

.sidebar-nav-fixed {
    position:fixed;
    top:60px;
    width:21.97%;
}

@media (max-width: 767px) {
    .sidebar-nav-fixed {
        position:static;
        width:auto;
    }
}

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        top:70px;
    }
}

Demo, edit here.

Twitter Bootstrap: Fixed header and right sidebar

Finally I got it. I set it as position: fixed and added class="offset6". Thank you for your help

Fixed Sidebar on the Right in fluid layout twitter bootstrap

Just got how to do it without actually using jquery. It is really simple.

I was just missing to add "right:0" to kick it all the way up to the right. So the following code should do it.

<div class="span2" style="position:fixed; right:0">  
CONTENT 
</div>

How to create a fixed sidebar layout with Bootstrap 4?

Updated 2020

Here's an updated answer for the latest Bootstrap 4.0.0. This version has classes that will help you create a sticky or fixed sidebar without the extra CSS....

Use sticky-top:

<div class="container">
    <div class="row py-3">
        <div class="col-3 order-2" id="sticky-sidebar">
            <div class="sticky-top">
                ...
            </div>
        </div>
        <div class="col" id="main">
            <h1>Main Area</h1>
            ...   
        </div>
    </div>
</div>

Demo: https://codeply.com/go/O9GMYBer4l

or, use position-fixed:

<div class="container-fluid">
    <div class="row">
        <div class="col-3 px-1 bg-dark position-fixed" id="sticky-sidebar">
            ...
        </div>
        <div class="col offset-3" id="main">
            <h1>Main Area</h1>
            ...
        </div>
    </div>
</div>

Demo: https://codeply.com/p/0Co95QlZsH

Also see:
Fixed and scrollable column in Bootstrap 4 flexbox

Bootstrap col fixed position

How to use CSS position sticky to keep a sidebar visible with Bootstrap 4

Create a responsive navbar sidebar "drawer" in Bootstrap 4?

---

Related Topics