Support for Internet Explorer: Due to IE's outdated technology, it is mandatory to define column start and row start if you want the grid to render correctly.

Column start and column span

The Bolt Grid is built on the concept of column start and column span, this allows the user to have full control of the grid layout.

Common usage

Main content in the center (column start 3 and column span 8) with 2 asides.

Aside Main Aside

Main content with an aside (column start 9 and column span 4).

Main Aside

Row start and row span

Row start and row span are also available, they are for less common layouts.

Row Row Row Start at column 2 and row 2 and span 2 rows. Row Row Row

All possible start and span options

Please refer to the Bolt Breakpoints for all possible breakpoint names. number@breakpoint-name means starting at that specific breakpoint, change to the number defined. For example: column_span: "6@small" means starting at the small breakpoint, span 6 columns.

Regular Option Responsive Option
column_start 1 to 12 1@breakpoint-name to 12@breakpoint-name
column_span 1 to 12 1@breakpoint-name to 12@breakpoint-name
row_start 1 to 12 1@breakpoint-name to 12@breakpoint-name
row_span 1 to 12 1@breakpoint-name to 12@breakpoint-name