To align your columns vertically, add the is-vcentered modifier
to the columns container.
Sponsor
Column options
Design different types of column layouts
Vertical alignment #
First column
Second column with more content. This is so you can see the vertical alignment.
<div class="columns is-vcentered">
<div class="column is-8">
<p class="bd-notification is-primary">First column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">
Second column with more content. This is so you can see the vertical
alignment.
</p>
</div>
</div>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-one-quarter
is-one-quarter
is-one-quarter
is-half
is-one-quarter
is-one-quarter
is-one-quarter
Auto
<div class="columns is-multiline is-mobile">
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-half">
<code>is-half</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column">Auto</div>
</div>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
<div class="columns is-mobile is-centered">
<div class="column is-half">
<p class="bd-notification is-primary">
<code class="html">is-half</code><br />
</p>
</div>
</div>
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
<div class="columns is-mobile is-multiline is-centered">
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br />
First Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br />
Our Second Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br />
Third Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br />
The Fourth Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br />
Fifth Column
</p>
</div>
</div>
