How do I get a three column layout with Twitter Bootstrap?

Question

I am trying to create a three column layout that is like the following:

http://www.manisheriar.com/holygrail/index.htm

It should be a fixed width - fluid width - fixed width layout.

Using Twitter Bootstrap, the left sidebar and fluid content work great. But I need the addition of a right sidebar too.

Answer 1

Try this: http://jsfiddle.net/andresilich/6vPqA/2/

CSS

.container-fluid > .sidebar {     position: relative;     top: 0;     left:auto;     width: 220px; /* width of sidebar */ }  .left {     float:left; }  .right {     float:right; }  .container-fluid > .content {     margin: 0 240px; /* width of sidebars + 10px of margin */ } 

HTML

<div class="sidebar left">     <div class="well">       <h5>Sidebar</h5>       .....     </div> </div>  <div class="sidebar right">     <div class="well">       <h5>Sidebar</h5>       .....     </div> </div> 

---

Per comments, i updated my answer to carry the possibility to switch between right and left sidebar with just a class.

Now you can use the following in the <div class="content"> div:

CSS

.fixed-fluid {     margin-left: 240px; } .fluid-fixed {     margin-right: 240px;     margin-left:auto !important; } .fixed-fixed {     margin: 0 240px; } 

Demo: http://jsfiddle.net/andresilich/6vPqA/3/show/ Edit: http://jsfiddle.net/andresilich/6vPqA/3/

---

Another user asked about if this method can be adapted to the latest version of the bootstrap (v2.0 at the time of writing) so here is a demo that uses it:

http://jsfiddle.net/andresilich/6vPqA/13/

Answer 2

For anyone interested, here is an example for the latest Bootstrap 3 version...

http://bootply.com/101100

You just need to add the .sidebar-nav-fixed to a DIV inside the left and right col-md-3 columns:

.sidebar-nav-fixed {     width:20%; }