Bulma columns are mobile-first: unprefixed columns stack on small screens; breakpoint suffixes (-mobile, -tablet, -desktop, -widescreen, -fullhd) apply from that tier upward—mirroring CSS media queries and Bootstrap’s prefixed grid.
Responsive sizing
is-half-mobile— 50% width from mobile breakpoint up (until overridden)is-one-third-tablet— third width from tablet upis-8-desktop— eight-twelfths from desktop up
Responsive columns container
Add is-mobile on columns to keep columns horizontal even on narrow viewports—useful for toolbars, not long-form content. is-desktop only activates the flex row at desktop width.
Important interview questions and answers
- Q: What does is-half-tablet mean?
A: From the tablet min-width upward, the column occupies half the row; below tablet it stacks full width unless another size modifier applies. - Q: Mobile-first in Bulma?
A: Basecolumnstacks; wider layouts add breakpoint-suffixed modifiers rather than max-width “desktop-first” rules.
Self-check
- Write modifiers for a column full on mobile, half on tablet, one-third on desktop.
- When would
columns is-mobilebe appropriate?
Interview prep
- How do you change column width at breakpoints?
Size modifiers like
is-half,is-one-third, and responsive helpers such asis-8-desktop(Bulma 1 naming).