Most production pages combine a handful of Bulma patterns: fixed navbar, hero or page title, sidebar + main columns, and a footer. Recognizing these recipes speeds up prototyping without fighting the framework.
Pattern: marketing landing
navbar → hero is-fullheight-with-navbar → feature section with columns → footer. Use has-text-centered on hero content and button is-primary is-large for the primary CTA.
Pattern: app shell
navbar is-fixed-top → section with columns where sidebar is column is-3 and main is column. Add top padding to the section to clear the fixed navbar (pt-6 or custom offset).
Pattern: documentation page
Narrow container, columns with is-narrow sidebar links and flexible content column—similar to how this tutorial site structures lessons.
Navbar note
The mobile navbar-burger toggle requires JavaScript (or a checkbox hack) to add is-active on the burger and menu. Bulma documents the markup; wire the toggle in your app—this track keeps playgrounds CSS-only unless noted in prose.
Important interview questions and answers
- Q: How do you handle a fixed navbar overlapping content?
A: Add top padding or margin to the first section equal to navbar height, or use Bulma’sis-fullheight-with-navbaron heroes designed for that case. - Q: Can you mix Bulma with custom grid CSS?
A: Yes—Bulma columns are flex; CSS Grid can coexist on different sections, but avoid fighting Bulma’s flex rules on the same element.
Self-check
- Sketch class names for a two-column docs layout with a narrow sidebar.
- Why does navbar-burger need JS outside the CSS bundle?