Columns
A simple way to build responsive columns
To build a grid, just:
- Add a
columns
container
- Add as many
column
elements as you want
Each column will have an equal width, no matter the number of columns.
<div class="columns">
<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>
Sizes
If you want to change the size of a single column, you can use one the following classes:
-
is-three-quarters
-
is-two-thirds
-
is-half
-
is-one-third
-
is-one-quarter
The other columns will fill up the remaining space automatically.
<div class="columns">
<div class="column is-three-quarters">
<p class="notification is-info">
<code class="html">is-three-quarters</code>
</p>
</div>
<div class="column">
<p class="notification is-warning">Auto</p>
</div>
<div class="column">
<p class="notification is-danger">Auto</p>
</div>
</div>
<div class="columns">
<div class="column is-two-thirds">
<p class="notification is-info">
<code class="html">is-two-thirds</code>
</p>
</div>
<div class="column">
<p class="notification is-warning">Auto</p>
</div>
<div class="column">
<p class="notification is-danger">Auto</p>
</div>
</div>
<div class="columns">
<div class="column is-half">
<p class="notification is-info">
<code class="html">is-half</code>
</p>
</div>
<div class="column">
<p class="notification is-warning">Auto</p>
</div>
<div class="column">
<p class="notification is-danger">Auto</p>
</div>
</div>
<div class="columns">
<div class="column is-one-third">
<p class="notification is-info">
<code class="html">is-one-third</code>
</p>
</div>
<div class="column">
<p class="notification is-success">Auto</p>
</div>
<div class="column">
<p class="notification is-warning">Auto</p>
</div>
</div>
<div class="columns">
<div class="column is-one-quarter">
<p class="notification is-info">
<code class="html">is-one-quarter</code>
</p>
</div>
<div class="column">
<p class="notification is-success">Auto</p>
</div>
</div>
12 columns
As the grid can be divided into 12 columns, there are size classes for each division:
is-2
is-3
is-4
is-5
is-6
is-7
is-8
is-9
is-10
is-11
Each modifier class is named after how many columns you want out of 12. So if you want 7 columns out of 12, use is-7
.
Offset
While you can use empty columns (like <div class="column"></div>
) to create horizontal space around .column
elements, you can also use offset modifiers like .is-offset-x
:
is-half
is-offset-one-quarter
<div class="columns is-mobile">
<div class="column is-half is-offset-one-quarter"></div>
</div>
<div class="columns is-mobile">
<div class="column is-4 is-offset-8"></div>
</div>
<div class="columns is-mobile">
<div class="column is-11 is-offset-1"></div>
</div>
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:
<div class="columns is-mobile">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</div>
If you want to see the difference, resize your browser and see when the columns are stacked and when they are horizontally distributed.
If you only want columns on desktop, just use the is-desktop
modifier on the columns
container:
<div class="columns is-desktop">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</div>
Different sizes per breakpoint
You can define a column size for each viewport size: mobile, tablet, and desktop.
is-half-mobile
is-one-third-tablet
is-one-quarter-desktop
If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.
<div class="columns is-mobile">
<div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
<code>is-half-mobile</code><br>
<code>is-one-third-tablet</code><br>
<code>is-one-quarter-desktop</code>
</div>
<div class="column">1</div>
<div class="column">1</div>
<div class="column">1</div>
<div class="column">1</div>
</div>
Nesting
You can nest columns to have more flexibility in your design. You only need to follow this structure:
-
columns
: top-level columns container
The difference with multiline columns is the order in the HTML code: all the blue columns appear before the red ones. Resize to a narrower viewport to see the result.
<div class="columns">
<div class="column">
First column
<div class="columns is-mobile">
<div class="column">
First nested column
</div>
<div class="column">
Second nested column
</div>
</div>
</div>
<div class="column">
Second column
<div class="columns is-mobile">
<div class="column is-half">
50%
</div>
<div class="column">
Auto
</div>
<div class="column">
Auto
</div>
</div>
</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 that would fit in a single row.
<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">
Auto
</div>
</div>
Gapless
If you want to remove the space between the columns, add the is-gapless
modifier on the columns
container:
<div class="columns is-gapless">
<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>
You can combine it with the is-multiline
modifier:
<div class="columns is-gapless 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">
Auto
</div>
</div>
Narrow 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.
<div class="columns">
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">Narrow column</p>
<p class="subtitle">This column is only 200px wide.</p>
</div>
</div>
<div class="column">
<div class="box">
<p class="title is-5">Flexible column</p>
<p class="subtitle">This column will take up the remaining space available.</p>
</div>
</div>
</div>
As for the size modifiers, you can have narrow columns for different breakpoints:
-
is-narrow-mobile
-
is-narrow-tablet
-
is-narrow-desktop