Home/ Questions/Q 9117587
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T04:55:50+00:00

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

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0