A more complicated Bootstrap layout example

The following post is a portion of the D3 Tips and Tricks book which is free to download. To use this post in context, consider it with the others in the blog or just download the the book as a pdf / epub or mobi .

----------------------------------------------------------

As promised earlier, it's worth looking at a more complex example for a layout with Bootstrap, just to get a feel for how it works or the potential it might have for you.

The example code layout we will design will look a bit like this;

 It looks slightly complex with a nesting of spans and rows, and the end result is only 5 separate sections, but it's really not too hard to put together if you start in the right place and build it up piece by piece.

We'll start in the middle and work our way out. The first piece to consider is the two side-by-side span4's.

 The code for these is just...

<div class="row">
  <div class="span4"></div>
  <div class="span4"></div>
</div>

 Directly under that row is another with a single span8.

 The code for this section is...

<div class="row">
  <div class="span8"></div>
</div>

Both of these rows together look like this;

 And the code is just one piece after the other.

<div class="row">
  <div class="span4"></div>
  <div class="span4"></div>
</div>
<div class="row">
  <div class="span8"></div>
</div>

 Because this entire block forms part of another (larger) row, we need to enclose it in its own `span8` (since this is part is only span8 wide). 

 And for the code the new `span8` div wraps all the current code we have.

<div class="span8">
  <div class="row">
    <div class="span4"></div>
    <div class="span4"></div>
  </div>
  <div class="row">
    <div class="span8"></div>
  </div>
</div>

 The `span8` is alongside a large `span4` that sits to the left.

 This requires another `span4` div to be placed before the span8.

<div class="span4"></div>
<div class="span8">
  <div class="row">
    <div class="span4"></div>
    <div class="span4"></div>
  </div>
  <div class="row">
    <div class="span8"></div>
  </div>
</div>

 The `span4` and the complex `span8` need to be in their own row...

 So a `row` div encloses all the code we have so far.

<div class="row">
  <div class="span4"></div>
  <div class="span8">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"></div>
    </div>
    <div class="row">
      <div class="span8"></div>
    </div>
  </div>
</div>

 Finally we need to place another row with a span12 in it above our current work.

 Again, we need to place the row and span before our current code so that it appears above the current code on the page.

<div class="row">
  <div class="span12"></div>
</div>
<div class="row">
  <div class="span4"></div>
  <div class="span8">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"></div>
    </div>
    <div class="row">
      <div class="span8"></div>
    </div>
  </div>
</div>

 There we have it!

Slightly more complex, but if you needed a heading, a sidebar, a couple of graphs and some explanatory text, that might be exactly what you were looking for :-).

The description above (and heaps of other stuff) is in the D3 Tips and Tricks book that can be downloaded for free (or donate if you really want to :-)).