bulma
Bulma is a free, open-source CSS framework based on Flexbox that provides ready-to-use, responsive UI components and a grid system without requiring any JavaScript. It's distributed as a single CSS file or as customizable Sass source.
Embed badge
[](https://opensources.dev/resource/bulma)MITPermissive — free to use in commercial and proprietary software, with attribution.View license →
Production readiness
5/5- Actively maintainedCommits in the last 6 months
- No known vulnerabilitiesNo OSV advisories
- Clear, usable licenseMIT (permissive)
- Proven adoptionWidely used
- Has documentationDocumentation indexed
Our analysis
Bulma is a pure-CSS framework built on Flexbox that ships a comprehensive set of styled components (columns, forms, buttons, cards, navbars, modals) and helper classes. It is intentionally JavaScript-free, leaving behavior up to the developer.
When to use bulma
Good for projects that want clean, readable semantic class names and a modern Flexbox grid without a JS dependency. Works well with any framework (React, Vue, Angular, plain HTML) and for developers who prefer component classes over utility-first approaches.
When not to
If you want utility-first, highly-customizable design-system control with purge/tree-shaking, Tailwind CSS is a better fit. If you need bundled interactive JS components (dropdowns, modals, carousels) out of the box, Bootstrap provides them; Bulma requires you to wire up interactivity yourself.
Strengths
- No JavaScript and no dependencies — just a CSS file or Sass source
- Clean, human-readable class names and a strong Flexbox-based grid/columns system
- Modular Sass architecture lets you import only what you need and theme via variables
- Framework-agnostic and easy to drop into any stack
Trade-offs
- No built-in JavaScript, so interactive components require manual implementation or third-party wrappers
- Component-class approach can lead to markup bloat and is less flexible than utility-first frameworks
- Smaller ecosystem and slower release cadence than Bootstrap or Tailwind
- Customization beyond Sass variables can require overriding styles
Maturity
Very mature and widely adopted with 50k+ stars, a stable 1.0 release, and broad documentation. Development is largely maintained by its original author with a relatively slow but steady pace; the project is production-ready though less actively evolving than utility-first competitors.
Building the documentation
The documentation HTML is produced with the Ruby-based jekyll tool.
Make sure Ruby 2.x is installed.
gem install jekyllifjekyllis not already installed.
Note: If you are an
Ubuntu user, make sure ruby2.x-dev is installed.
Viewing the documentation locally
To view the documentation on your system locally:
Setup
cdintodocs/directoryCopy the config file,
cp _config.yml _config.local.ymlEdit
_config.local.ymland change theurl:value tohttp://localhost:4000. This local config file will be ignored by git.
Run Jekyll
In a separate shell session,
cdto thedocs/directory, and do:
jekyll serve --incremental --config _config.local.yml
This will start an HTTP server at http://localhost:4000/ that serves the docs built in the _site directory; and anytime the docs are rebuilt by you, it will serve the docs site on the fly. You can also add the --open-url option (or its alias --o) to automatically open the server URL in your default browser when it's ready.
In your main shell session where you develop, if you change anything in docs/ the jekyll server will rebuild those on the fly. But if you change anything about the Bulma SASS or CSS, you need to do npm run start to build the docs' CSS before you will see it in the browser. The process running jekyll serve will pick up the new CSS automatically.