Our grid system is based on the Bootstrap CSS library. Please read the Boostrap source documentation thoroughly. The grid system allows us to create responsive layouts by rerranging content depending on the width of the viewport (aka, the browser window.)
Each page or template must include at least one section, a semantically correct element which holds the grid structure. Semantic tags are important to good communication between the markup and the browser, essential for accessibility, especially screen readers, and also extremely useful for developers to understand, find, and modify the content within the markup. Semantic tags are:
Everything in the grid is held in a container. The container sets a maximum width of 1200px and a minimum width of 320px. It has left and right padding of 20px on mobile (< 768px) and 10px on larger devices (≥ 768px).
The blue box represents a container.
desktop_windows Desktop view with 10px left and right padding
phone_iphone Mobile view with 20px left and right padding
A column is the most basic unit of our grid. It can be any height; its width depends on the size of the device and the number of columns per row.
The purple box represents a column.
Each column has padding of 10px on the left and right sides called a gutter.
Each cyan side represents a gutter.
Columns are contained in a row. The columns get wider or narrower depending on how many there are in a row. A row can contain 1, 2, 3, 4, 6, 8, 9, or 12 columns. (The Design Language also supports a 5-column grid system, read more here. A row also has negative margins on either side, so that it spans the full width of the container.
Breakpoints are the exact viewport widths where the grid will reflow.
|Extra small (viewport < 768px)||
|Small (viewport ≥ 768px)||
|Medium (viewport ≥ 992px)||
|Large (viewport ≥ 1200px)||
The column classes describe how many columns they will span per breakpoint in the format of col–[breakpoint]–[number].
<div class="col-xs-12 col-sm-6">
A col-xs-12 class will span 12 columns at the extra-small breakpoint, less than 768 pixels.
A col-sm-6 class describes a column that will span 6 columns at the small breakpoint,
which is greater than or equal to 768 pixels. Since there is no larger breakpoint,
lg) this applies to all devices greater than or equal to 768 pixels.
In the following example, there is a row with a single column that spans all 12 columns at all breakpoints which contains a header. Beneath that is a row that contains 2 side-by-side columns that each span 6 columns on the small (and larger) breakpoints. On mobile, the extra-small breakpoint, there are 2 full width columns, one above the other. Click the mobile and desktop icons to see this in action. Note that the code stays the same.
In the following example, there is a row with a single column that spans all 12 columns at all breakpoints which contains a header. Beneath that is a row that contains 4 side-by-side columns that each span 3 columns on the small (and larger) breakpoints. On mobile, the extra-small breakpoint, there are 2 half-width columns, that each span 6 columns, one above the other. Click the mobile and desktop icons to see this in action. As in the example above, note that the code stays the same.
Nesting a container within another container will cause alignment issues, especially across breakpoints.
row class especially needs a
because the negative margins of the row compensates for the padding of the container.
row class provides negative padding that ensures all content is aligned.
Columns without a
row class will not be aligned correctly and will reflow
in unexpected ways.
Every column or group of columns must be contained in its own
including nested columns.
If you look at the code of the common complex layout below, you will notice that it is formatted in the following order:
- Main header
- Main navigation content
- Main actions and information
- Some information
- Main actions and information
- Main footer content
On a larger device, the design calls for the "Main actions and information" area to be in the middle, flanked by "Some information" and "Extra". However, on mobile, the content will appear in the order above. Rather than trying to reorder the columns on the extra-small breakpoint, the layout is achieved through column ordering on the larger breakpoint, so the content flows naturally on the extra-small, (mobile) breakpoint. The markup is mobile-first.
SCSS styling must also be mobile first. A mobile device (with potentially less bandwidth), will ignore all breakpoints except for its own. The xs breakpoint, is not used because any styles outside the larger breakpoints are the mobile styles, making it mobile first.
A mobile device will read only the following:
A mobile device will read the following:
Easily change the order of grid columns per breakpoint with
col-[breakpoint]-pull-[column-number] modifier classes.
col-xs-push-6 col-xs-6 pushes
col-xs-6 over 6 columns at the
extra small breakpoint, and
col-xs-pull-6 col-xs-6 pulls
col-xs-6 6 columns
to the left at the extra small breakpoint. Since no other breakpoints are used, this behavior
is across all viewports.
Centered columns are an easy way to create centered layouts across all breakpoints.
They must be an even number of columns, between 2 and 10. Use the class as you would any
other column class, inside a
row which is inside a
|Extra small devices
||12 columns||12 columns||10 columns||10 columns|
||12 columns||10 columns||8 columns||8 columns|
||12 columns||8 columns||6 columns||6 columns|
||12 columns||6 columns||4 columns||4 columns|
||12 columns||4 columns||2 columns||2 columns|
Limitations of the 12-column grid make it impossible for 5 columns to take the entire width of a row with five evenly distributed columns.
(The Design Language also supports a 5-column grid system, read more here.)