How to Get a Three Column Layout with Twitter Bootstrap

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

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/

Three column layout where content continues on the next column

You can do what you're asking using CSS3 columns. Instead of using bootstrap to create the three even columns, use CSS:

.col-overflow-3 {  -moz-column-count: 3;  -webkit-column-count: 3;  column-count: 3;  height: 140px;  column-fill: auto;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/><div class="container">  <div class="row">    <div class="col-overflow-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum    </div>  </div></div>

Three column Bootstrap layout with left sidebar at bottom

You can keep the div as your first container followed by the asides and then use col-lg-push-* and col-lg-pull-* to switch on larger device. Source here

Demo [Click on Full Page of the snippet to test for larger device]

div,aside { height: 50px}.content { background: lightpink;}.side1 { background: lightblue;}.side2 { background: lightgreen;}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<div class="container">  <div class="content left col-md-7 col-lg-push-2"></div>  <aside class="side1 left col-md-2 col-lg-pull-7"></aside>  <aside class="side2 left col-md-3"></aside></div>

bootstrap three column positioning

Your problem is, that your layout is not summing to 12 columns..

col-lg-3 + col-lg-3 + col-lg-3 are summing to 9 columns and in bootstraps grid-system you have 12 columns per row.

also there is no col-xxs-** class. (lg = large; md = medium; sm = small; xs = extra small)

this shoud do the trick:

<div class="container">
  <div class="row yellow">
    <div class="col-lg-12 ">
      <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 green text-center">
        test
      </div>
      <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 green text-center">
        test
      </div>
      <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 green text-center">
        test
      </div>
    </div>
  </div>
</div>

Take a look at Bootrstaps Docs to learn more about the Grid-System: http://getbootstrap.com/css/#grid

three column fluid layout with twitter bootstrap - clearfixes messing things up

Define your .nav-tabs div as inline-block to contain it within its boundaries properly, like so:

.nav-tabs {
 display: inline-block;
 width:100%;
}

demo: http://jsfiddle.net/6vPqA/15/show/
edit: http://jsfiddle.net/6vPqA/15/

edit: added width so the menu will adapt better.

Bootstrap grid 3 column layout doesn't work

The reason why you are not getting the results you expect from bootstrap is likely due to you missing a resource.

Please make sure that you have the following included in the section of your document.

    <head> 
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>

CodePen example: https://codepen.io/CapySloth/pen/gRGNxa

Organising a 3-column to 2-column in Twitter Bootstrap 3

So here goes,

first of all you should use the designs for smaller screens BEFORE larger screens like so:

<div class="col-sm-6 col-lg-3"> (...)

Now for your design to happen you need to to this:

<div class="col-sm-6 col-lg-3">
1
</div>
<div class="col-sm-6 col-lg-3 col-lg-push-3">
3
</div>
<div class="col-sm-6 col-lg-3 col-lg-pull-3">
2
</div>

...what I did is that I reversed the 2nd with 3rd column so that they fit my needs for the smaller screen and then by using push and pull I adjusted for the larger screens.

edit: here is a working fiddle:

http://jsfiddle.net/ujrwyrbr/2/