Bulma: a Flexbox-based CSS framework
/bulma
Bulma is a CSS-only framework built on Flexbox — grid, buttons, cards, and forms, with zero JavaScript shipped. Reach for it if you want Bootstrap-style classes but plan to wire up your own interactivity in React, Vue, or plain JS. Skip it if you need modals and dropdowns working out of the box.
What is Bulma?
Bulma is an open-source CSS framework built entirely on Flexbox, distributed as a single compiled stylesheet or as Sass source files you can customize. It ships form, button, card, navbar, and grid classes for laying out a page, but includes no JavaScript, so any interactive behavior (modals opening, dropdowns toggling) is code you write yourself.
Key features of Bulma
- ✓Flexbox-based grid and columns system for responsive layouts without writing custom CSS media queries by hand
- ✓Sass source files let you override variables (colors, spacing, breakpoints) before compiling your own build
- ✓No JavaScript included — Bulma is purely a style layer, so dropdowns, modals, and tabs need your own JS or a UI library
- ✓Autoprefixer handles vendor prefixes for older browsers automatically during the build
- ✓Ships a single compiled bulma.css file you can drop in from a CDN with zero build step
- ✓Component classes cover buttons, cards, navbars, forms, tables, and modals out of the box
- ✓Partial support for Internet Explorer 10+ alongside full support for current Chrome, Firefox, Safari, Edge, and Opera
How to install Bulma
Install from npm with `npm install bulma`, or with Yarn via `yarn add bulma`, or Bower via `bower install bulma`. After installing, import the CSS into your project with `@import 'bulma/css/bulma.css'`. For a zero-build setup, load it straight from a CDN via jsDelivr's bulma package page instead of installing anything locally.
Using Bulma in a project
Once the CSS file is loaded, you write plain HTML and apply Bulma's class names — `button`, `card`, `navbar`, `columns` — the same way you'd use Bootstrap classes. That's the whole API. To customize instead of using the precompiled file, download the Sass source and override its variables before compiling your own bulma.css, since there's no runtime theming API. Wiring up a mobile nav toggle or a modal's open/close state is left entirely to you, because there's no bundled JavaScript.
Why developers choose Bulma
- ✓No JavaScript to audit or version — the output is one CSS file, so it can't conflict with your own JS stack
- ✓Sass variables give you real customization (colors, breakpoints, spacing) without hacking overrides after the fact
- ✓Flexbox grid avoids the float-based hacks older CSS frameworks still carry
- ✓Framework-agnostic: works the same whether the rest of the page is React, Vue, plain HTML, or a Rails view
Bulma's limitations
- △No JavaScript means no built-in modal, dropdown, or tab behavior — you're writing or importing that logic yourself
- △Internet Explorer is only partially supported (10+), so older enterprise environments may see broken layouts
- △Customization beyond variables means editing Sass source and rebuilding, not just flipping a config flag
- △The official docs point to third-party wrapper packages (Buefy, Bloomer, react-bulma-components) for interactive components, which adds another dependency to evaluate
Bulma vs Bootstrap and Tailwind
Frequently asked questions
Yes, Bulma is released under the MIT license, so you can use it in commercial projects without paying anything or crediting the project. Jeremy Thomas holds the copyright, but MIT permits commercial use, modification, and redistribution.
No, Bulma ships zero JavaScript — it's a pure CSS framework. Interactive behavior like a dropdown opening or a mobile nav toggling has to be wired up with your own script or a component library such as Buefy or Bloomer.
Download Bulma's Sass source files instead of the precompiled CSS, override its variables (colors, spacing, breakpoints) in your own Sass file, then compile that into your final stylesheet. There's no runtime theming — customization happens at build time.
Bulma targets recent versions of Chrome, Edge, Firefox, Opera, and Safari, using autoprefixer to patch Flexbox vendor prefixes automatically. Internet Explorer 10 and up gets only partial support, so expect some layout issues there.
Bulma is CSS-only and built on Flexbox, while Bootstrap bundles its own JavaScript for components like modals and dropdowns. Choose Bulma for a lighter, style-only layer to pair with your own JS; choose Bootstrap for interactive components working immediately.
Yes — Bulma's plain CSS classes work in any framework since they're just HTML class names. React developers can use wrapper libraries like Bloomer or rbx, and Vue developers can use Buefy, all built on top of Bulma's styles.
The problem it solves
Building a responsive layout from scratch means writing your own Flexbox grid, breakpoint media queries, and component styling (buttons, cards, forms) every time you start a project. Bulma packages that layer as ready-made class names so you skip re-writing the same CSS, while deliberately leaving JavaScript out so it doesn't fight with whatever framework or vanilla JS you're already running.
Best use cases
- •Prototyping a responsive admin dashboard or marketing site quickly with prebuilt classes instead of hand-rolled CSS
- •Adding a consistent CSS layer to a React, Vue, or vanilla JS project without pulling in a JS-heavy UI kit
- •Building static or server-rendered sites (Rails, Django, Laravel) where a wrapper package handles the asset pipeline
- •Teaching or learning Flexbox layout patterns through a real class-based system
Who should try it — and who should skip
Try Bulma if you're comfortable writing your own JavaScript (or already have a framework like React or Vue handling interactivity) and want a CSS layer that stays out of the way. Skip it if you want interactive components ready out of the box without wiring anything yourself — Bootstrap or a Bulma-based component library like Buefy will get you there faster.
Related repositories
Still deciding about bulma?
One click hands the question to an AI along with this page — see what it says about bulma.