Bulma - A CSS framework based on Flexbox

Bulma is an open-source, easy-to-learn, mobile-first, sass-modular, highly-customizable, Flexbox-based, environment-agnostic CSS framework.

Bulma uses autoprefixer to make most Flexbox features compatible with earlier browser versions. According to Can I use, Bulma is compatible with recent versions of major browsers.

Getting Started

You can get Bulma using one of following methods:

Bulma is simply a collection of CSS classes included in one .css file or 39+ modular .sass files. You can use Bulma in either ways:

  • Import a single pre-compiled .css file that include all of Bulma.
@import 'bulma/css/bulma.css';
  • Import many .sass files individually depends on what you need.
@import 'bulma/sass/utilities/_all.sass';
@import 'bulma/sass/grid/columns.sass';

Key Features

Bulma is one of the most popular CSS frameworks anyone from a beginner to a professional should consider using. Here’s why:

Syntax looks clean and fresh. The classnames were expressive and the actual css generated looked minimal and simple. Bulma uses is- keywords for base class and modifiers which is very easy to read and understand.

Bulma is component-rich. Bulma comes with pretty much all of the components you need to give your site a crisp, functional appearance, including dropdown menus, navigation bars, panels, tabs, and tables.

Bulma has a simple grid system. To build a Bulma grid, you only need a single .columns container to wrap as many .column items as you want.

<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
</div>

Bulma requires no JavaScript. By focusing only on CSS, Bulma provides a lightweight solution that can easily be implemented in any development context like React, Vue, Angular, or Ember.

Bulma is highly customizable with 419+ Sass variables living across 28 files. Since these variables carry the !default flag, they can be assigned a new value either before or after having been imported.

Bulma supports Font Awesome 4+ thanks to the .icon element.

Bulma is easy-to-learn with simple readable class names like .button or .title, and a straightforward modifiers system like .is-primary or .is-large, it’s easy to pick up Bulma in minutes.

Bulma is mobile-first responsive, every element in Bulma is mobile-first and optimizes for vertical reading, has 5 breakpoints, and uses 9 responsive mixins.

Bulma ships with 100+ useful CSS helpers to specify color, display, and spacing.