Columns: sizes, responsiveness, gaps

By default columns share the row equally. To make one wider than another, give it a size modifier. The columns without a size share the remaining space.

Sizes in words

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="columns is-mobile">
  <div class="column is-two-thirds has-background-primary-light">Menu</div>
  <div class="column has-background-light">Cart</div>
</div>

The menu takes two thirds of the row and the cart the remaining third. The is-mobile modifier here and below keeps the row visible in the narrow preview.

Class	Width
`is-full`	100%
`is-three-quarters`, `is-two-thirds`, `is-half`	75%, 66%, 50%
`is-one-third`, `is-one-quarter`, `is-one-fifth`	33%, 25%, 20%
`is-1` … `is-12`	parts of 12, as in Bootstrap: `is-4` is a third
`is-narrow`	as wide as its content
`is-offset-one-quarter`, `is-offset-2`	a left offset of that width

Different sizes on different screens

Add a screen suffix to a size and the width applies only from that breakpoint:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="columns is-multiline">
  <div class="column is-half-tablet is-one-quarter-desktop has-background-light">Carbonara</div>
  <div class="column is-half-tablet is-one-quarter-desktop has-background-light">Pesto</div>
  <div class="column is-half-tablet is-one-quarter-desktop has-background-light">Lasagne</div>
  <div class="column is-half-tablet is-one-quarter-desktop has-background-light">Risotto</div>
</div>

On a phone and in the narrow preview the dishes form a list, on a tablet they go two per row, on a desktop four. Open the example in your own file and change the window width to see all three layouts. The is-multiline modifier lets columns wrap to a new line; without it all four would squeeze into one row.

Gaps between columns

Set the gap on the row with classes from is-0 to is-8: each step is 0.25 rem, and is-3 (0.75 rem) is the default. The is-gapless class removes the gap entirely:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="columns is-mobile is-gapless">
  <div class="column has-background-primary">Mon–Fri</div>
  <div class="column has-background-primary-dark has-text-white">Sat–Sun</div>
</div>

The two columns touch, forming a single strip. Gap classes accept suffixes as well: is-1-mobile is-6-desktop.

Nested columns

Inside a column you can create another columns row. It divides the width of that column:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="columns is-mobile">
  <div class="column is-one-quarter has-background-light">Categories</div>
  <div class="column">
    <div class="columns is-mobile">
      <div class="column has-background-info-light">Dish 1</div>
      <div class="column has-background-info-light">Dish 2</div>
    </div>
  </div>
</div>

A narrow categories column on the left, a large column on the right that is itself split in two. This is how an admin page lays out a row of stat cards inside the main area.

Alignment

Row class	What it does
`is-centered`	Centres the columns when they do not fill the row
`is-vcentered`	Centres the columns vertically
`is-desktop`	Columns switch on only from 1024 px

Common mistake

Giving columns sizes that add up to more than 100% and forgetting is-multiline. Without it the row does not wrap, and the last columns stick out past the right edge of the page. When there are more columns than fit in a row, always add is-multiline to the row.

Thanks for reading!