Structure your content with a twelve-column system, powered by flexbox.
The following example creates three equal-width columns on tablet, desktop, and widescreen devices. Columns must have a
row as a parent.
Grid can be divided into 12 columns with size classes for each part from
is-12. In the following example we see the difference between
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
Building a grid layout is simple:
- Add a
row element within a container
- Add as many
col elements as you want
|To divide the grid into 12 columns
|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