Skip to main content
Bulma is a modern CSS framework based on Flexbox that provides ready-to-use frontend components you can easily combine to build responsive web interfaces.

​
What makes Bulma unique

​
CSS only, zero JavaScript

Bulma is purely a CSS framework. The sole output is a single CSS file: bulma.css. There is no JavaScript included. This design philosophy means you have complete freedom to implement your own JavaScript logic without worrying about conflicts or dependencies. Bulma is environment agnostic - it’s just the style layer on top of your logic.
Bulma doesn’t force you into any JavaScript framework. Use it with React, Vue, Angular, vanilla JavaScript, or any tool you prefer.

​
Built with Flexbox

Bulma leverages modern CSS Flexbox technology to create flexible, responsive layouts. This provides:
  • Natural responsive behavior
  • Cleaner, more maintainable code
  • Better browser performance
  • Intuitive layout patterns

​
Modern architecture

Bulma is built with Sass and provides:
  • CSS custom properties for runtime theming
  • Sass variables for compile-time customization
  • Built-in dark mode support
  • Modular structure - use only what you need

​
Key features

Responsive by default

Bulma uses a mobile-first approach with 5 breakpoints: mobile, tablet, desktop, widescreen, and fullhd.

Easy to learn

Simple, intuitive class names like button, card, navbar make Bulma approachable for beginners.

Modular components

Use individual components or import the entire framework. Components include buttons, forms, cards, navbars, modals, and more.

Customizable

Override Sass variables, use CSS custom properties, or customize through the built-in theme system.

​
What’s included

Bulma provides a comprehensive set of components organized into logical categories:
  • Elements: Button, Box, Content, Icon, Image, Notification, Progress, Table, Tag, Title
  • Components: Breadcrumb, Card, Dropdown, Menu, Message, Modal, Navbar, Pagination, Panel, Tabs
  • Form: Input, Textarea, Select, Checkbox, Radio, File upload
  • Layout: Container, Level, Media Object, Hero, Section, Footer
  • Grid: Columns system with Flexbox
  • Helpers: Color, typography, spacing, flexbox, and visibility utilities

​
Browser support

Bulma uses autoprefixer to make Flexbox features compatible with earlier browser versions. Bulma is compatible with recent versions of:
  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari
Internet Explorer (10+) is only partially supported due to limited Flexbox support.

​
When to use Bulma

Bulma is ideal for:
  • Projects where you want to bring your own JavaScript
  • Rapid prototyping with clean, modern UI
  • Teams that prefer CSS-only frameworks
  • Applications that need custom theme support
  • Projects requiring built-in dark mode
Bulma may not be the best choice if:
  • You need JavaScript-powered components out of the box
  • You require extensive browser support including IE9 and below
  • You prefer utility-first CSS frameworks like Tailwind

​
Version information

This documentation covers Bulma v1.0.4. The framework is actively maintained and follows semantic versioning.
Bulma is open source and MIT licensed. Contribute on GitHub or report issues to help improve the framework.

​
Next steps

Ready to start using Bulma? Check out the Quickstart guide to build your first component in minutes. For installation options and setup instructions, see the Installation page.

Build docs developers (and LLMs) love

Get started for freeTalk to us