Columns

Flexbox is a one-dimensional grid system, providing you with either rows or columns. In Bulma, you develop websites with columns in mind and wrap your columns inside a row or wrapper. Here is the most basic functionality of Bulma.

You start off with a columns row.

<div class="columns">

</div>

Inside of the columns row, you can add a single column or as many as you like. Bulma and Flexbox size your column depending on the number of columns added in a columns row.

<div class="columns">
  <div class="column">

  </div>
</div>

In this example, the column is 100% of the browser width, because there is only one column.

<div class="columns">
  <div class="column">

  </div>

  <div class="column">

  </div>
</div>

Now, each column is not 50%. This was explained briefly in the introduction, but it’s worth mentioning again. The more columns you...