How to Build a 2 Column (Fixed - Fluid) Layout With Twitter Bootstrap

How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?

- Another Update -

Since Twitter Bootstrap version 2.0 - which saw the removal of the .container-fluid class - it has not been possible to implement a two column fixed-fluid layout using just the bootstrap classes - however I have updated my answer to include some small CSS changes that can be made in your own CSS code that will make this possible

It is possible to implement a fixed-fluid structure using the CSS found below and slightly modified HTML code taken from the Twitter Bootstrap Scaffolding : layouts documentation page:

HTML

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="fixed">  <!-- we want this div to be fixed width -->
            ...
        </div>
        <div class="hero-unit filler">  <!-- we have removed spanX class -->
            ...
        </div>
    </div>
</div>

CSS

/* CSS for fixed-fluid layout */

.fixed {
    width: 150px;  /* the fixed width required */
    float: left;
}

.fixed + div {
     margin-left: 150px;  /* must match the fixed width in the .fixed class */
     overflow: hidden;
}


/* CSS to ensure sidebar and content are same height (optional) */

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
    position: relative;
}

.filler:after{
    background-color:inherit;
    bottom: 0;
    content: "";
    height: auto;
    min-height: 100%;
    left: 0;
    margin:inherit;
    right: 0;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: -1;  
}

I have kept the answer below - even though the edit to support 2.0 made it a fluid-fluid solution - as it explains the concepts behind making the sidebar and content the same height (a significant part of the askers question as identified in the comments)

Important

Answer below is fluid-fluid

Update
As pointed out by @JasonCapriotti in the comments, the original answer to this question (created for v1.0) did not work in Bootstrap 2.0. For this reason, I have updated the answer to support Bootstrap 2.0

To ensure that the main content fills at least 100% of the screen height, we need to set the height of the html and body to 100% and create a new css class called .fill which has a minimum-height of 100%:

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}

We can then add the .fill class to any element that we need to take up 100% of the sceen height. In this case we add it to the first div:

<div class="container-fluid fill">
    ...
</div>

To ensure that the Sidebar and the Content columns have the same height is very difficult and unnecessary. Instead we can use the ::after pseudo selector to add a filler element that will give the illusion that the two columns have the same height:

.filler::after {
    background-color: inherit;
    bottom: 0;
    content: "";
    right: 0;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: -1;  
}

To make sure that the .filler element is positioned relatively to the .fill element we need to add position: relative to .fill:

.fill { 
    min-height: 100%;
    position: relative;
}

And finally add the .filler style to the HTML:

HTML

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="span3">
            ...
        </div>
        <div class="span9 hero-unit filler">
            ...
        </div>
    </div>
</div>

Notes

If you need the element on the left of the page to be the filler then you need to change right: 0 to left: 0.

How to build a two column fluid layout with Twitter Bootstrap v3.0

The grid in Bootstrap 3 is now fluid by default (http://getbootstrap.com/getting-started/#migration-dropped). You just need to use .row and .container..

<div class="container">
    <div class="row">
        <div class="col-md-2">
            Sidebar content
        </div>
        <div class="col-md-10">
            Body content
        </div>
    </div>
</div>

This however will not be 100% width. If you want 100% width you can do something like this.. http://www.bootply.com/86324

UPDATE: 3.0.1 and later use container-fluid for full width.

Twitter Bootstrap Two Column Responsive Layout - Sidebar 100% height with fixed width

Check this out.

<div class="row">
    <div class="span3" style="position:fixed;background-color:#46a546;height:100%;top:0px;" id="leftmargin">
        position fixed navbar (out of .container)
    </div>
</div>
<div class="container">
  <div class="row">
      <div class="span9 offset3" style="background-color:#049cdb;">
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
      </div>
  </div>
</div>

And a bit of jQuery

function sizing() {
    var windowwidth=$(window).width();
    var containerwidth=$('.container').width();
    if(windowwidth<1200) {
      var diff=windowwidth-containerwidth+40;
    }
    else {
      var diff=windowwidth-containerwidth+60; 
    }
    $('#leftmargin').text("window="+ windowwidth+",container="+containerwidth);
    if(windowwidth<=767) {
      $('#leftmargin').css('margin-left', '0px');
      $('#leftmargin').css('position', 'relative');  
    }
    else {
      $('#leftmargin').css('position', 'fixed');        
        if(diff>0) {
            $('#leftmargin').css('margin-left', (diff/2) +'px');
        } else {
            $('#leftmargin').css('margin-left', '20px');
        }
    }
}
$(document).ready(sizing);
$(window).resize(sizing);

http://jsfiddle.net/NzqfL/3/

inspired by my previous post https://stackoverflow.com/a/10972425/1416911

How to make a fixed width column with a container-fluid?

A fixed-fluid layout is possible in Bootstrap 3, but now that Bootstrap 4 is flexbox this layout is much easier. You just need to enable flexbox, and make a few simple adjustments to set the width of your fixed side column flex: 0 0 300px;, and then flex: 1; on your main column to fill remaining width...

Bootstrap 4 Alpha 2
http://codeply.com/go/eAYKvDkiGw

Here's a simpler update for the latest Bootstrap 4 which is flexbox by default:

Bootstrap 4 Alpha 6 or Beta
http://codeply.com/go/V9UQrvLWwz

 @media (min-width: 576px) {
     .sidebar {
          max-width: 280px;
     }
 }

<div class="container-fluid">
    <div class="row flex-nowrap">
        <div class="col-md-4 col-12 sidebar">

        </div>
        <div class="col-md col-12 main">
            <h2>Main (fluid width...)</h2>
        </div>
    </div>
</div>

Also see: How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?

Update 2018
Bootstrap 4.0.0 example

In Twitter Bootstrap 2, how can I get right columns to move to the top when shrinking the screen?

Responded to a question much like this one today, you can see it here, what it basically came down to was shifting the flow of the sidebar by floating it to the right and compensating for the left margin of the content area and then resetting the float attribute of the sidebar with a @media query to accommodate the sidebar once again with its default value from the bootstrap stylesheet.

CSS

body {
    padding-top: 60px;
    padding-bottom: 40px;
}
.sidebar-nav {
    padding: 9px 0;
}

#sidebar {
    float:right;
}

#content {
    margin-left: 0;
}

@media (max-width: 767px) {
    #sidebar {
        float:none;
    }
}

Here is a reworked demo from the previous question: fiddle, edit here.

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>

Fluid twitter bootstrap layout with min-width columns on left and right (sidebars)

finally found a very well working solution (for me) here also at StackOverflow:
How do I get a three column layout with Twitter Bootstrap?

Anyway thank you very much for your help guys !