Grid system

How to use the Bulma grid.

Get Started

1

Grid basics

Basic grid

Bulkit uses the Bulma.io flex-box based grid system. It is very flexible and easy to use. To create a new row, create a div with a .columns class. It serves as the main wrapper for the columns that you will use to build your layout. This columns can have several modifiers:

  • .is-vcentered: vertically centers all columns inside that row.

  • .is-gapless: removes padding between columns.

  • .is-multiline: gives the row the flex-wrap: wrap css property, so your columns span accross multiple lines.

  • .is-flex-mobile: maintains the flex layout on mobile devices.

More modifiers and responsive options are available, just check the Bulma.io framework documentation. To add columns, just add the needed number of divs with a class of .column inside the previously created .columns div. Columns without any modifier share the available space.

Column

Column

Column

Column

Column sizes

Columns have several size modifiers that you can define. You can try .is-three-quarters, is-two-thirds, .is-half, .is-one-third or .is-one-quarter. Columns without a modifier will take the available space remaining.

is-three-quarters

Auto

Auto

is-two-thirds

Auto

Auto

is-half

Auto

Auto

is-one-third

Auto

Auto

is-one-quarter

Auto

Auto

12 columns system

Columns can also be organized following a 12 columns grid system. In this case, modifiers take the form of .is-* followed by desired number, from 1 to 12.

is-2

Auto

Auto

Auto

Auto

Auto

Auto

Auto

is-3

Auto

Auto

Auto

Auto

Auto

Auto

is-4

Auto

Auto

Auto

Auto

Auto

is-5

Auto

Auto

Auto

Auto

Auto

is-6

Auto

Auto

Auto

Auto

12 columns examples

You can find below some examples of what you can achieve with the Bulma grid. Layout possibilities are endless. Note that you can easily nest .columns (e.g : rows) inside others .columns.

is-6

is-6

is-4

is-8

is-4

is-4

is-4

is-3

is-3

is-3

is-3

is-7

is-5

Column offsets

Columns can be offseted easily. To offset a column, add a modifier following this naming convention : is-offset-* where * represents the value of the offset you want in the grid.

is-6 is-offset-3

is-4 is-offset-2

is-3 is-offset-5

Using Fifths

New 0.6.1

Columns now support being divided in fifths since Bulma 0.6.1 : You can now use the following multiples of 20% :

  • is-four-fifths
  • is-three-fifths
  • is-two-fifths
  • is-one-fifth

is-four-fifths

Auto

Auto

is-three-fifths

Auto

Auto

is-two-fifths

Auto

Auto

is-one-fifth

Auto

Auto