Structure your content with a twelve-column system, powered by CSS flexbox.
The following example creates three equal-width columns on tablet, desktop, and widescreen
devices. Columns must have a
row as a parent.
Grids can be divided into 12 columns with size classes ranging from
is-12. In the following example we see the difference between
row elements to have
columns automatically wrap to a new line.
Create empty horizontal space from the left using
You can nest columns to have more flexibility in your design.
row 2 col 1
row 2 col 2
row 2 col 3
|To divide the grid into 12 columns
|If you want to change the size of a single column, you can use one of the following
|To create horizontal space around column elements
|To take the space it needs, while the other column takes up the remaining space
Having troubles with the guide? Please give us more details and we'll get back to you soon.
Chat with the team