Tips on coding this layout with Twitter Bootstrap

Question

I am trying to make this layout with Twitter Bootstrap (only the boxes) :

enter image description here

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?

Is that top bar a fixed navbar or just a regular navbar? Is this setup fixed or fluid? Is the big box the same height as the two side boxes? — Andres I Perez, Jul 17 '12 at 23:59
topbar is fixed, setup is fluid, big box should be same size as the side boxes. — Justin D., Jul 18 '12 at 00:03

score 3 · Accepted Answer · answered Jul 18 '12 at 00:41

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

score 2 · Answer 2 · answered Jul 17 '12 at 23:52

If you're using the fixed width layout:

.row
  .span8
  .span4
    .row
     .span4
    .row
    .span4

If you're using fluid layout:

.row-fluid
  .span8
  .span4
    .row-fluid
      .span12
    .row-fluid
      .span12

This assumes you're not concerned about matching the heights of the two columns, which wouldn't be handled by Bootstrap anyway.

score 0 · Answer 3 · answered Jul 17 '12 at 23:46

Like most grid based systems, the one used in twitter bootstrap will help you lay things out by rows but NOT by columns.

I'm assuming you want the big box on the left to be the same height as the two boxes on the right. If that's the case the easiest way to do it is with tables. Yes, people give tables a bad rap but for certain layouts it's the simplest solution.

<table>
  <tr>
    <td>big box on left</td>
    <td>
      <div>small top box on right</div>
      <div>small bottom box on right</div>
    </td>
  </tr>
</table>

Then style accordingly

Tips on coding this layout with Twitter Bootstrap

3 Answers3