How to get columns to wrap to a new line with Bulma

If you come from a bootstrap background you are probably used to the columns wrapping automatically. However, Bulma is a bit different.

To make it so that all the columns are not just on one line you need to use the is-multiline class to the columns container. Adding is-multiline makes it so that the other columns wrap around to the new line.

For example:

<div class="columns is-multiline">
  <div class="column is-half">
    col 1
  </div>
  <div class="column is-half">
    col 2
  </div>
    <div class="column is-half">
    col 3
  </div>
</div>

Thanks to the is-multiline class, the last column (col 3) will be on a new line. Without is-multiline then it won't wrap.

Alternate method

The alternate method to wrap the columns to a new line in Bulma is simply to start a new columns container for the new columns. However, I much prefer the first method.

The alternate method would look like this

<div class="columns">
  <div class="column is-half">
    col 1
  </div>
  <div class="column is-half">
    col 2
  </div>
</div>
<div class="columns">
      <div class="column is-half">
    col 3
  </div>
</div>

Here is a codepen for both methods.