is-four-fifths
is-three-fifths
is-two-fifths
is-one-fifth
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
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
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
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
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
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