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.
--- title: Column options layout: documentation doc-tab: columns doc-subtab: options --- {% capture columns_multiline %}
is-one-quarter
is-one-quarter
is-one-quarter
is-one-quarter
is-half
is-one-quarter
is-one-quarter
is-one-quarter
is-one-quarter
is-one-quarter
is-one-quarter
is-half
is-one-quarter
is-one-quarter
is-half
is-narrow
is-narrow
First Column
is-narrow
Our Second Column
is-narrow
Third Column
is-narrow
The Fourth Column
is-narrow
Fifth Column
Narrow column
This column is only 200px wide.
Flexible column
This column will take up the remaining space available.
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.
is-one-quarter
is-one-quarter
is-one-quarter
is-one-quarter
is-half
is-one-quarter
is-one-quarter
is-one-quarter
Auto
If you want to remove the space between the columns, add the is-gapless
modifier on the columns
container:
First column
Second column
Third column
Fourth column
You can combine it with the is-multiline
modifier:
is-one-quarter
is-one-quarter
is-one-quarter
is-one-quarter
is-half
is-one-quarter
is-one-quarter
is-one-quarter
Auto
While you can use empty columns (like <div class="column"></div>
) to create horizontal space around .column
elements, you can also use .is-centered
on the parent .columns
element:
is-half
is-narrow
Use with .is-multiline
to create a flexible, centered list (try resizing to see centering in different viewport sizes):
is-narrow
First Column
is-narrow
Our Second Column
is-narrow
Third Column
is-narrow
The Fourth Column
is-narrow
Fifth 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