Columns
A simple way to build responsive columns
To build a grid, just:
- Add a
columns
container
- Add as many
column
elements as you want
Each column will have an equal width, no matter the number of columns.
Sizes
If you want to change the size of a single column, you can use one the following classes:
-
is-three-quarters
-
is-two-thirds
-
is-half
-
is-one-third
-
is-one-quarter
The other columns will fill up the remaining space automatically.
12 columns
As the grid can be divided into 12 columns, there are size classes for each division:
is-2
is-3
is-4
is-5
is-6
is-7
is-8
is-9
is-10
is-11
Each modifier class is named after how many columns you want out of 12. So if you want 7 columns out of 12, use is-7
.
Offset
While you can use empty columns (like <div class="column"></div>
) to create horizontal space around .column
elements, you can also use offset modifiers like .is-offset-x
:
is-half
is-offset-one-quarter
Responsiveness
By default, columns are only activated from tablet onwards. This means columns are stacked on top of each other on mobile.
If you want columns to work on mobile too, just add the is-mobile
modifier on the columns
container:
If you want to see the difference, resize your browser and see when the columns are stacked and when they are horizontally distributed.
If you only want columns on desktop, just use the is-desktop
modifier on the columns
container:
Different sizes per breakpoint
You can define a column size for each viewport size: mobile, tablet, and desktop.
is-half-mobile
is-one-third-tablet
is-one-quarter-desktop
If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.
Nesting
You can nest columns to have more flexibility in your design. You only need to follow this structure:
-
columns
: top-level columns container
The difference with multiline columns is the order in the HTML code: all the blue columns appear before the red ones. Resize to a narrower viewport to see the result.
Multiline
Whenever you want to start a new line, you can close a columns
container and start a new one. But you can also add the is-multiline
modifier and add more column elements that would fit in a single row.
Gapless
If you want to remove the space between the columns, add the is-gapless
modifier on the columns
container:
You can combine it with the is-multiline
modifier:
Narrow column
If you want a column to only take the space it needs, use the is-narrow
modifier. The other column(s) will fill up the remaining space.
Narrow column
This column is only 200px wide.
Flexible column
This column will take up the remaining space available.
As for the size modifiers, you can have narrow columns for different breakpoints:
-
is-narrow-mobile
-
is-narrow-tablet
-
is-narrow-desktop