Tips on coding this layout with Twitter Bootstrap

haml, ruby-on-rails, ruby-on-rails-3, twitter-bootstrap, twitter-bootstrap-rails

Solution

You can stack the `.span*` blocks inside a `.row-fluid` container which you can then nest inside another `span*` block to create the effect you're looking for. Try this for example:

HTML

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span9">
            <div class="big box">
                box
            </div>
        </div>
        <div class="span3">
            <div class="row-fluid">
                <div class="span3">
                    <div class="box">
                        box
                    </div>
                </div>
                <div class="span3">
                    <div class="box">
                        box
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Notice how i nested the two side blocks one on top of each other contained within a `.row-fluid` container inside a another `.span*` block t stack them up.

Now with a little CSS you we can stretch the stacked `.span*` blocks to the width of the parent block to create a column:

CSS

.row-fluid [class*="span"] .row-fluid [class*="span"] {
    margin-left: 0;
    width: 100%;
}

Demo: http://jsfiddle.net/k27S5/show/

Don't know much of HAML but after taking a look at the documentation the setup should look something like this:

HAML

.container-fluid
  .row-fluid
    .span9
      content
    .span3
      .row-fluid
        .span3
          content
        .span3
          content

Problem

I am trying to make this layout with Twitter Bootstrap (only the boxes) : Basically, it is a youtube embedded video and two equal size boxes to its right. I have this right now (haml) : ``` .row .span8 / embedded code .span4 / I need to put two boxes here... how? ```

Original source