Columns: the basics

Columns are the main way to lay content out horizontally: a menu on the left and text on the right, three cards in a row. Bulma needs only two classes for it: columns for the row and column for each column inside it. The row is built on flexbox, and by default the columns share its width equally.

A row and its columns

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="columns">
  <div class="column has-background-primary-light">Starters</div>
  <div class="column has-background-info-light">Pasta</div>
  <div class="column has-background-warning-light">Desserts</div>
</div>

On a wide screen the three columns stand in a row, each taking a third. In the narrow preview they stack — the reason is explained below. The has-background-*-light classes only tint the columns so that you can see their edges. Add a fourth column and all of them become quarters — nothing needs recalculating.

Columns on a phone

Bulma's columns switch on from a width of 769 px, the tablet size. On a narrower screen they stack, one per line. For a restaurant menu this is convenient: on a phone dishes form a list instead of squeezing into thin strips.

If the row must stay a row on a phone too — say, two small buttons, or a price next to a dish name — add the is-mobile modifier to the row:

<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 has-background-light">Tiramisu</div>
  <div class="column has-background-light has-text-right">€7</div>
</div>

The name and the price stay on one line at any window width, including the narrow preview. That is why the course examples that need to show a row put is-mobile on columns.

Columns with real content

A column can hold anything: text, an image, another Bulma element. The column adds its own padding, so neighbouring blocks do not stick together:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="columns">
  <div class="column">
    <img src="/media/photo-400x250.jpg" alt="The dining room">
  </div>
  <div class="column">
    <h2 class="title is-4">About us</h2>
    <p>Trattoria Oliva opened in 2012. We make the pasta by hand every morning.</p>
  </div>
</div>

On a wide screen there is a photo of the dining room on the left and a heading and text on the right; in the preview and on a phone the text goes under the photo. The image does not overflow the column: Bulma gives images max-width: 100%.

How it works

The row's negative margins cancel out the padding of the outer columns, so the content lines up exactly with the page edges.

Common mistake

Putting a column straight into a container or a section without the columns wrapper. Then there is no flexbox, and the columns stack even on a wide screen. A column always sits inside a row: columns, then column inside it, then the content.