How Bulma works under the hood

Bulma layers a minimal CSS reset, a flexbox column system, component rules, and helper utilities—all delivered as a single compiled stylesheet with no runtime JavaScript from the framework itself.

What loads in the browser

1. CSS bundle — columns, elements (button, input), components (navbar, hero), and helpers (spacing, colors, visibility)
2. Your markup — semantic HTML plus Bulma class names; modifiers stack on base classes
3. Optional JS — only when you add interactivity (navbar burger toggle, modals); not part of Bulma’s core

The playground uses a CDN link for convenience. Production apps often install via npm, import only needed Sass partials, and customize variables before compile—similar to theming Bootstrap from source.

Modifier vocabulary

• is-* — state or variant on the element (is-primary, is-half, is-hidden-mobile)
• has-* — something the element contains or displays (has-text-centered, has-background-info)

Important interview questions and answers

1. Q: Why is Bulma “CSS-only”?
   A: The framework ships styling without bundling JavaScript plugins; interactive behavior is intentionally left to the developer.
2. Q: CDN vs npm?
   A: CDN is fine for prototypes and lessons; npm + Sass gives variable overrides, partial imports, and version pinning in CI.
3. Q: How does Bulma 1.0 differ from 0.9?
   A: Bulma 1.x modernizes the codebase, improves CSS custom properties support, and refines the modifier system while keeping the familiar class API.

Self-check

1. What does Bulma not provide that Bootstrap’s JS bundle does?
2. When might a production app compile Bulma from Sass instead of linking CDN CSS?