Columns...

A columns layout with Bulma is very easy:

  1. Add a columns container
  2. You can add a max of 12 column elements

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

See Codepen

See the Pen RwbxKGR by BulmaExpression (@BulmaExpression) on CodePen.


Six columns in 1 row:

  1. Create 1 columns container
  2. You can give a size value to the columns element, in this case, is-6 column

As you can see, Column 1 , 2 , and 3 are the same size because we have not specified the size.

See Codepen


Two rows of columns

  1. Add 2 columns container
  2. You can add as many column as you want to.

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

See Codepen

See the Pen 2 rows of columns by BulmaExpression (@BulmaExpression) on CodePen.


Nesting columns

  1. Create 1 columns container.
  2. Then create 1 column container.
  3. Add 1 columns container into that column container and center the content with the is-centered class.
  4. Then create 2 column container into the last columns container and give them a size with the is-1, is-2,...is-12. class.

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

See Codepen

See the Pen BulmaExpression - Nesting columns by BulmaExpression (@BulmaExpression) on CodePen.