--- 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.

{% endcapture %} {% capture columns_multiline %}

is-one-quarter

is-half

is-one-quarter

Auto

{% endcapture %} {% capture columns_mobile_centered %}

is-half

{% endcapture %} {% capture columns_mobile_multiline_centered %}

is-narrow
First Column

is-narrow
Our Second Column

is-narrow
Third Column

is-narrow
The Fourth Column

is-narrow
Fifth Column

{% endcapture %} {% include elements/anchor.html name="Vertical alignment" %}

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.

{% highlight html %}{{ columns_vcentered }}{% endhighlight %} {% include elements/anchor.html name="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 than would fit in a single row.

is-one-quarter

is-half

is-one-quarter

Auto

{% highlight html %}{{ columns_multiline }}{% endhighlight %} {% include elements/anchor.html name="Centering columns" %}

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

{% highlight html %}{{ columns_mobile_centered }}{% endhighlight %}

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

{% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %}