Bootstrap Grid Patterns

Bootstrap Grid System:

http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

I. Basic Structures & Nesting

Uses floating to achieve grid layout mechanism.

A. Base Grid Elements:

• Concept of a row (.row)
• Concept of a proportion of an implicit 12-column context (.spanX) = the number of segments (out of 12) making a column.

B. Patterned Markup Structure:

Similar in construct to Foundation, Bootstrap uses the same patterned logic that leaves the act of positioning to the end-user to manipulate children content elements. [See notes on Foundation] – the only difference is in the naming convention.

“For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).”

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

C. Naming Conventions:

Bootstrap’s Grid classes are also modular definitions where their semantic meaning is referencing design function rather than content meaning. It follows an almost identical mechanism logic to Foundation—the only difference is in the implied notion of a column and thus no explicit .column class defined. Instead, only the modifying classes that describe the particular variance of column settings.

“each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).”

“Move columns to the right using .offset* classes.”

<div class="row">
    <div class="span4">...</div>
    <div class="span3 offset2">...</div>
</div>

The use of modifiers centered around an missing but implicit “column” can be confusing to the new web designer who is not familiar with the underlying mechanisms of grid-based layouts. However, it does avoid the potential confusion between the unit as a divisor or the unit as a layout organization [such as in the case of the Foundation naming scheme].

Where this seems to be a strength is when dealing with Nesting. As each nest level children must always add up to the total segment number (12), rather than the parent divisor number. Not including the term “column” helps to clarify and avoid mathematical confusion by not thinking of the units as columns. Conceptually, the spanX – actually describe a mathematical segment of 12 that renders the illusion of a column and do not really describe a column.

Bootstrap’s Nesting:

<div class="row-fluid">
    <div class="span12">
    Level 1 of column
        <div class="row-fluid">
            <div class="span6">Level 2</div>
            <div class="span6">Level 2</div>
        </div>
    </div>
</div>

vs. Foundation’s Nesting:

<div class="row">
  <div class="eight columns">
    <div class="row">
      <div class="six columns">
        Six columns (nested)
      </div>
      <div class="six columns">
        Six columns (nested)
      </div>
    </div>
  </div>
</div>

In the above examples – it seems confusing that 12 columns could fit inside 8 columns.

Bootstrap's spanX naming helps to decouple the notion of columns and remind the user that we are talking about sub-units of 12 – rather than true “columns”.

II. Page Layout Wrappers

Bootstrap’s Grid System has a notion of a Page Layout wrapper with certain characteristics that constrain the set of rows and children elements.

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2">
        <!--Sidebar content-->
		</div>
		<div class="span10">
		<!--Body content-->
		</div>
	</div>
</div>