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:

First column

Second column

Third column

Fourth column

<div class="columns is-mobile">
    <div class="column">First column</div>
    <div class="column">Second column</div>
    <div class="column">Third column</div>
    <div class="column">Fourth column</div>
</div>

Resize

Resize your browser to see the difference.

If you only want columns on desktop upwards, just use the is-desktop modifier on the columns container:

First column

Second column

Third column

Fourth column

<div class="columns is-desktop">
    <div class="column">First column</div>
    <div class="column">Second column</div>
    <div class="column">Third column</div>
    <div class="column">Fourth column</div>
</div>

Different sizes per breakpoint

You can define a column size for each viewport size: mobile, tablet, and desktop.

is-9-mobile
is-8-tablet
is-6-desktop
is-4-widescreen
is-3-fullhd

1

1

1

1

<div class="columns is-mobile">
    <div class="column is-9-mobile is-8-tablet is-6-desktop is-4-widescreen is-3-fullhd">
        <code>is-9-mobile</code><br/>
        <code>is-8-tablet</code><br/>
        <code>is-6-desktop</code><br/>
        <code>is-4-widescreen</code><br/>
        <code>is-3-fullhd</code>
    </div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
</div>
← Nesting →