Columns powered by Flexbox

A simple way to build responsive columns

Building a columns layout with Bulma is very simple:

Add a columns container
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

#native_company# #native_desc#

#native_cta#

New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:

PDF Epub Mobi

or

Kindle

PDF + Epub + Mobi Buy from

Kindle version Buy from

Or download a free sample !

Support Bulma