Simple columns system

Bulma is mostly famous for its straightforward columns architecture:

<div class="columns">
  <div class="column">
    <!-- First column -->
  </div>
  <div class="column">
    <!-- Second column -->
  </div>
</div>

That’s it! It only takes two classes (columns for the container, column for the child items) to have a set of responsive columns. You don’t have to specify any dimensions: both columns will each take 50% of the width automatically.

If you want a third column, just add another column:

<div class="columns">
  <div class="column">
    <!-- First column -->
  </div>
  <div class="column">
    <!-- Second column -->
  </div>
  <div class="column">
    <!-- Third column -->
  </div>
</div>

Each column will now take up 33% of the width. No additional change is required! Continue this and put as many columns in as your want. Bulma will automatically adjust the size.