How does Bootstrap's grid layout work

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 .

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

Bootstrap's grid layout subdivides the page by using rows and spans. A row will extend horizontally and web page can be thought of as being 12 spans wide. Each span is a place to put content.

As an example, the picture below shows a single row divided into twelve individual spans.

The spans can be combined to create larger spaces for larger content. The example below has a single span6 and two span3's. 

The span's will change height dynamically to fit their contents. So if there was a larger item in the span6 example given above (perhaps a graph), it would expand like so;

The way to set these rows and spans up is by dividing the screen using divs and assigning them class types that match the grid layout.

For example, to create our example of a single row with a span6 and two span3's we would use the following html code as our baseline.

<div class="row">
  <div class="span6"></div>
  <div class="span3"></div>
  <div class="span3"></div>
</div>

 In this example code we can see the `row` div is enclosing the three spans. We can extend the comparison by putting the code into our graphic example.

 To add content to the structure, all that is needed is to put our web page components between the `<div class="span#">` and `</div>` tags.

Later we will look (briefly) at more complex configurations that might be useful.

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 :-)).