Twitter Bootstrap - 2 column layout

Question

How can I make 2 column layout with Twitter Bootstrap? I use this scheme:

<div class="container">         
  <div class="row">
    <div class="span2"> 
      Red rectangle
    </div>
    <div class="span6">
      Blue rectangle
    </div>
    <div class="span6">
      Blue rectangle
    </div>
    <div class="span6">
      Blue rectangle
    </div>
    <div class="span6">
      Blue rectangle
    </div>
  </div>
</div>

Which generates this layout:

I would like to have the blue rectangles always "on the right", not left.

What am I doing wrong?

Answer 1

You might want to review the scaffolding documentation . It sounds more like you want rows nested inside your right hand column.

<div class="container">         
  <div class="row">

    <div class="span2"> 
      Red Rectangle
    </div>

    <div class="span6">
      <div class="row">
        <div class="span6">
          Blue Rectangle
        </div>
      </div>
      <div class="row">
        <div class="span6">
          Blue Rectangle
        </div>
      </div>
      <div class="row">
        <div class="span6">
          Blue Rectangle
        </div>
      </div>
      <div class="row">
        <div class="span6">
          Blue Rectangle
        </div>
      </div>
    </div>

  </div>
</div>

It might not actually be necessary to wrap each blue rectangle in a "row" div, with span6 they should stack. But its cleaner this way.

Answer 2

you want to use the .offset* class. in the above case, you'll want to use .offset6 to make the rectangles float to the far right.

see offsetting columns here:

http://twitter.github.com/bootstrap/scaffolding.html#gridSystem