Columns responsiveness

Handle different column layouts for each breakpoint


Mobile columns #

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:

1

2

3

4

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

Resize

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 upwards, just use the is-desktop modifier on the columns container:

1

2

3

4

<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 column sizes per breakpoint #

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

is-three-quarters-mobile
is-two-thirds-tablet
is-half-desktop
is-one-third-widescreen
is-one-quarter-fullhd

2

3

4

5

Resize

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-three-quarters-mobile is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
    <code>is-three-quarters-mobile</code><br>
    <code>is-two-thirds-tablet</code><br>
    <code>is-half-desktop</code><br>
    <code>is-one-third-widescreen</code><br>
    <code>is-one-quarter-fullhd</code>
  </div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
</div>

Made with Bulma
This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

#native_company# #native_desc#
#native_cta#
New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!