The basic structure

Start by adding an element with class="row", this will create a horizontal block with a clearfix to contain vertical columns.

Then nest a div/divs with a column class within that row. You can use class="column" or class="columns" - the only difference is grammar. As long as the columns are divisible by 12 you can have an array of columns with varied column spans.

Finally specify the widths of each column with the small-#, medium-#, and large-# classes to control the column widths in each break-point.

Example 1:

3 column grid

Above is a snippet of markup for a basic 3 column grid, and by nesting a component such as <section class="promo-panel"> you can see how the columns control the components within, and it's completely flexible as long as it's divisible by 12 you can have a whole variety of combinations.

Including the combined classes small and large, you can control how the columns behave in each breakpoint. In this example by setting the small to 12 columns wide or simply don't include it, then by default these will span full width and stack as horizontal rows on small screens such as portrait smart phones.

Squeeze the width of the browser to see the columns transition in each breakpoint

Example 2:

2 columns of varying widths spanning a grid of 3

Above is a snippet of markup for a basic 3 column grid, and by nesting a component such as <section class="promo-panel"> you can see how the columns control the components within, and it's completely flexible as long as it's divisible by 12 you can have a whole variety of combinations.

Including the combined classes small and large, you can control how the columns behave in each breakpoint. In this example by setting the small to 12 columns wide or simply don't include it, then by default these will span full width and stack as horizontal rows on small screens such as portrait smart phones.

Squeeze the width of the browser to see the columns transition in each breakpoint