To align your columns vertically, add the is-vcentered modifier to the columns container.
--- title: Column options layout: documentation doc-tab: columns doc-subtab: options breadcrumb: - home - documentation - columns - columns-options --- {% capture columns_vcentered %}
First column
Second column with more content. This is so you can see the vertical alignment.
is-one-quarter
is-one-quarter
is-one-quarter
is-one-quarter
is-half
is-one-quarter
is-one-quarter
is-one-quarter
is-half
is-narrow
First Column
is-narrow
Our Second Column
is-narrow
Third Column
is-narrow
The Fourth Column
is-narrow
Fifth Column
To align your columns vertically, add the is-vcentered modifier to the columns container.
First column
Second column with more content. This is so you can see the vertical alignment.
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 than 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
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
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