Categories
css html twitter-bootstrap

Twitter Bootstrap – 2 column layout

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:
enter image description here

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

What am I doing wrong?

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.