Simple columns system

Bulma is mostly famous for its straightforward columns architecture:

<div class="columns">
  <div class="column">
    <!-- First column -->
  </div>
  <div class="column">
    <!-- Second column -->
  </div>
</div>

That’s it! It only takes two classes (columns for the container, column for the child items) to have a set of responsive columns. You don’t have to specify any dimensions: both columns will each take 50% of the width automatically.

If you want a third column, just add another column:

<div class="columns">
  <div class="column">
    <!-- First column -->
  </div>
  <div class="column">
    <!-- Second column -->
  </div>
  <div class="column">
    <!-- Third column -->
  </div>
</div>

Each column will now take up 33% of the width. No additional change is required! Continue this and put as many columns in as your want. Bulma will automatically adjust the size.

Readability

Bulma is easy to learn because it’s easy to read. For example, a Bulma button simply uses the class name button.

<a class="button">
  Save changes
</a>

To extend this button, Bulma provides modifier classes. They exist only as a way to provide the base button with alternative styles. To make this button use the primary turquoise color, and increase its size to large, just append the classes is-primary and is-large.

<a class="button is-primary is-large">
  Save changes
</a>

Tip: You might want to stick with the “primary”, “secondary” naming conventions. This will help give some meaning to your styles and it leaves it open for customization down the road.

Customizable

Bulma has more than 300 variables, making almost any value in Bulma easy to override, allowing you to define a very personalized setup.

By using SASS, you can set your own initial variables, like overriding the blue color value, or the primary font family, or even the various responsive breakpoints.

// 1. Import the initial variables
@import "../sass/utilities/initial-variables"
@import "../sass/utilities/functions"

// 2. Set your own initial variables
// Update blue
$blue: #72d0eb

// Add pink and its invert

$pink: #ffb3b3
$pink-invert: #fff

// Add a serif family
$family-serif: "Merriweather", "Georgia", serif

// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink
$primary-invert: $pink-invert

// Use the existing orange as the danger color
$danger: $orange

// Use the new serif family
$family-primary: $family-serif

// 4. Import the rest of Bulma
@import "../bulma"

Each Bulma component also comes with its own set of variables:

• box has its own shadow
• columns have their own gap
• menu has its own background and foregroud colors
• button and input have colors for each of their states (hover, active, focus…)
• etc.

Each documentation page comes with the list of available variables to override.

Modular

Because Bulma is split into dozens of files, it’s easy to only import the parts you actually need.

For example, some developers only want the columns. All they have to do is create a custom SASS file with the following code:

@import "bulma/sass/utilities/_all"
@import "bulma/sass/grid/columns"

This will only import the columns and column CSS classes.

Summary

With this overview under your belt it is now time to look at some of the main terminology used in Bulma.