You are viewing the deprecated 0.6.0 version of the website. Click here to view the latest version

Columns

A simple way to build responsive columns


Building a columns layout with Bulma is very simple:

  1. Add a columns container
  2. Add as many column elements as you want

Each column will have an equal width, no matter the number of columns.

First column

Second column

Third column

Fourth column

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

This page is open source. Noticed a typo? Or something unclear? Improve this page on GitHub

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!