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

Answer 1

This is the best I could find.

http://www.bootply.com/9logoZy2fv

Here's the code:

   <div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="http://bootply.com">Bootply</a>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Responsive</a></li>
          <li><a href="#">Layout</a></li>
          <li><a href="#">Example</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2">
          <!--sidebar-->
          <div class="sidebar-nav-fixed" data-spy="affix" data-offset-top="140">
          <ul class="nav nav-list">
            <li><a href="#">Home</a></li>
            <li><a href="#">Responsive</a></li>
            <li><a href="#">Layouts</a></li>
            <li class="divider"></li>
            <li><a href="#">Bootstrap</a></li>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Modal</a></li>
            <li><a href="#">Carousel</a></li>
            <li class="divider"></li>
            <li><a href="#">Typeahead</a></li>
            <li><a href="#">Themes</a></li>
            <li><a href="#">Template</a></li>
            <li><a href="#">Affix</a></li>
            <li class="divider"></li>
            <li><a href="#">Bootstrap 3</a></li>
            <li><a href="#">Sidebar</a></li>
            <li><a href="#">Grid</a></li>
            <li><a href="#">Column</a></li>
            <li class="divider"></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
          </div>
        </div>
        <div class="span3">

          <!--2nd column-->
          <div id="midCol" data-spy="affix" data-offset-top="250">

            <img src="//placehold.it/300x150/449955/FFF">
            <h4 class="caption">Image Caption <span class="pull-right"><i class="icon-twitter"></i></span></h4>  

            <hr>

            <img src="//placehold.it/300x150/2255EE/EEE">
            <h4 class="caption">Image Caption</h4>  

            <hr>

            <img src="//placehold.it/300x150/992233">
            <h4 class="caption">Image Caption</h4>  

            <hr>

            <img src="//placehold.it/300x150/555555/FFF">
            <h4 class="caption">Image Caption</h4>  

            <hr>

            <img src="//placehold.it/300x150/d9d9d9/EEE">
            <h4 class="caption">Image Caption</h4>  

            <hr>


          </div><!--/middleCol-->

        </div><!--/span3-->
        <div class="span7">

        <div class="well"><h1>3-Column Layout</h1><p>This is a template example that uses the Bootstrap framework to create a responsive three-column layout.
          The left column (narrow) contains a sidebar, the center column (mid) contains features with image/caption, and the right column (widest) contains content.

        </p>
        <a href="http://www.bootply.com/63275" class="btn btn-primary">Details</a>
        <span class="badge pull-right">100</span>
        </div>

        <div class="well"><h1>Affix</h1><p>This layout utilizes the <b>Bootstrap Affix</b> component using data attributes. You can see
        the Affix plugin in action as you scroll down the page. The leftmost side is "pinned" until 140px is reached, and the middle column is un-pinned once 250px is reached.
        See the CSS <code>.affix</code> and <code>.affix-top</code> classes to see how this works.  
        </p>
        <button class="btn">Details</button>  
        </div>

        <div class="well"><h1>Bootply</h1><p>This example layout is compliments of Bootply -- the Bootstrap playground. 
        Bootply lets you play with JavaScript, HTML, CSS and Bootstrap in a simple Web-based editor. Bootply enables you to 
        easily include popular libraries, plugins, extensions and frameworks such as jQuery, FontAwesome, AngularJS, FuelUX and Google Maps.
        </p>
        <a href="http://www.bootply.com" class="btn">Details</a>  
        </div>

        <div class="well"><h1>HTML5 / CSS3</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
        Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
        dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
        <a href="http://www.bootply.com/63275">Edit this on Bootply</a>.</p>
        <button class="btn">Details</button>  
        </div>

        <div class="well"><h1>Snippets</h1><p>Bootply is also a collaborative tool that enables sharing of snippets. There is a repository of more than 1000 Bootstrap-ready code snippets. Find
        code snippets demonstrate common Bootstrap components such as the carousel (sliders), modal, typeahead, navbar, typography, buttons, tabs and icons.</p>
        <a href="http://www.bootply.com" class="btn">Details</a> 
        </div>

          <div class="well"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
        Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
        dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
        Aliquam in felis sit amet augue.</p>
        <button class="btn">Details</button>  
        </div>


        </div>
    </div>
</div>

and the CSS:

body {
  padding-top: 60px;
}
@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}

/* uncomment this section to make the sidebar un-pin
.affix-top {
    top:60px;
    position:fixed;
}

.affix {
    position:static;
}
*/

.affix-top {
    top:60px;
    position:fixed;
}

/* custom theme */

#midCol.affix-top {
    position:fixed;
    margin-left:-18px;
    margin-right:10px;
}

#midCol.affix-bottom {
    position:static;
}

#midCol.affix {
    position:static;
}

@media (max-width:1190px) {
  .affix,.affix-top,#midCol.affix,#midCol.affix-top {
      position:static;
  }
}

.caption {
    background-color:#eee;
    padding:10px;
    margin:0;
    color:#555;
}

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

Answer 3

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 4

Here you go:

• http://www.bootply.com/aEFO6lrDS8

This solution uses a table layout with 3 columns: left, middle, right. The outerTable has width 100%, the left and right columns have fixed pixel widths, and the middle column scales to fill the remaining space. The middle column has a Bootstrap 3 container with a bunch of sample col-xx-1's in them. Resize your browser width in order to see the standard bootstrap grid sizing process taking place (i.e. the col-lg-1's will change to full width when the browser's width is < 1200 etc...

BTW it's easier to play with browser resizing in bootply's "render" mode:

• http://www.bootply.com/render/aEFO6lrDS8

And some more bootstrappy content:

• http://www.bootply.com/yLotdZd1Ge
• http://www.bootply.com/render/yLotdZd1Ge