Bulma’s layout is a flexbox column system: a columns wrapper is the flex container, and each direct column child shares horizontal space. Unlike Bootstrap’s 12-column grid, Bulma sizes columns with fraction modifiers rather than numeric spans by default.
Core building blocks
columns— flex container; addis-mobile,is-multiline, oris-centeredas neededcolumn— flexible child; grows to fill unless a size modifier is setis-gapless— removes horizontal margins between columns
Concepts from CSS flexbox still apply—Bulma wraps them in predictable class names. A minimal valid layout is columns → column → content.
Important interview questions and answers
- Q: columns vs column?
A:columnsis the flex row;columnis each flex item. You need both for the grid to behave. - Q: How is Bulma’s system different from Bootstrap’s row/col?
A: Bootstrap uses a 12-track grid withcol-md-6; Bulma uses flex fractions likeis-halfor twelfths likeis-4oncolumn.
Self-check
- What two classes form the smallest valid Bulma layout?
- What does
is-multilineoncolumnsdo?
Challenge
Three equal columns
- Wrap three
.columnelements in.columns. - Add
is-one-thirdor equal width columns and resize the preview.
Done when: three columns sit in one row on desktop and stack on narrow widths when responsive classes are applied.
Interview prep
- What wraps columns in Bulma?
A parent
.columnsflex container; each child.columnis a flex item.