Grid system

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.