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:

   

  

    

      
        
        
        
      
      Bootply
      

        

          
Home
          
Responsive
          
Layout
          
Example
        
      
    
  


    

        

          
          

          

            
Home
            
Responsive
            
Layouts
            

            
Bootstrap
            
Resources
            
Modal
            
Carousel
            

            
Typeahead
            
Themes
            
Template
            
Affix
            

            
Bootstrap 3
            
Sidebar
            
Grid
            
Column
            

            
Link
            
Link
            
Link
            
Link
          
          
        
        


          
          


            
            
Image Caption 
  

            


            
            
Image Caption
  

            


            
            
Image Caption
  

            


            
            
Image Caption
  

            


            
            
Image Caption
  

            



          


        

        


        
3-Column Layout
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.

        
        Details
        100
        

        
Affix
This layout utilizes the Bootstrap Affix 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 .affix and .affix-top classes to see how this works.  
        
        Details  
        

        
Bootply
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.
        
        Details  
        

        
HTML5 / CSS3
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. 
        Edit this on Bootply.
        Details  
        

        
Snippets
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.
        Details 
        

          
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.
        Details  
        


        
    

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