Grid system

This page describes the grid component. grid is build up with a row and one or more cell's, a cell can be a size from 1 - 12 and each row is build up till 12 columns. If you do not want to use all 12 column individually, you can group the columns together to create wider columns

Cell examples

Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 4
Col 4
Col 4
Col 4
Col 8
Col 6
Col 6
Col 12

Responsive behaviour

The grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other. Options are applied mobile first which means that you can overrule the cell size on each larger breakpoint. Currently we know the following breakpoint: xs (default), sm, md, lg and xl.

Col 12. From breakpoint sm col-6
Col 12. From breakpoint sm col-6
Col 12. From breakpoint md col-4
Col 12. From breakpoint md col-8

Alignment

Right text
Left text