Bulma is built on flexbox everywhere—columns, navbars, level bars, and hero centers all use flex under the hood. Your mental model should start with CSS flexbox, then map Bulma class names onto those behaviors.
When to use components vs helpers
- Standard UI chrome (button, notification, tag) → Bulma component classes
- One-off alignment or spacing →
is-flex,mt-4,has-text-centered - Product-specific branding → override Sass variables or a thin custom stylesheet
The main layout primitive is columns wrapping column children—not a 12-column grid with numeric spans. You size columns with fraction modifiers like is-half, is-one-third, or is-4 (of 12).
Important interview questions and answers
- Q: Does using Bulma mean no custom CSS?
A: No. Bulma handles the baseline; custom CSS covers brand colors, unique layouts, and integrations Bulma does not model. - Q: Why flexbox instead of CSS Grid for Bulma’s columns?
A: Bulma predates widespread Grid adoption and flexbox covers most one-dimensional layout needs; tiles and columns compose nested flex contexts for richer layouts.
Self-check
- Give an example where a Bulma component beats stacking helper classes.
- What is the difference between
columnsand a singlecolumn?
Interview prep
- Why is Bulma described as Flexbox-first?
The grid uses
.columns/.columnflex containers instead of a 12-column float or CSS grid system like Bootstrap’s row/col.