Learn Bulma in 5 minutes

An introductory tutorial to the popular CSS framework.

We’ve also created a free Bulma course. Click here to check it out!

You can click the image to get to the course.

The setup

Setting up Bulma is super easy, and you can do it in several different ways, whether you prefer NPM, downloading it directly from the docs, or using a CDN. We’re just going to link to a CDN from our HTML file, like this:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">

Modifiers

The first thing you should learn about Bulma is the modifier classes. These allow you to set alternative styles to almost all of the Bulma elements. They all start with is-* or has-*, and then you replace the * with the style you want.

Buttons

To turn a normal button into a Bulma button, we’ll simply give it the class of button.

<button class="button">Click here</button>
<button class="button is-large is-success is-rounded">Click here</button>

Columns

At the core of any CSS framework is how they solve columns, as that’s relevant for almost every website you’ll ever build. Bulma is based on Flexbox, so it’s really simple to create columns. Let’s create a row with four columns.

<div class="columns">
<div class="column">
First column
</div>
<div class="column">
Second column
</div>
<div class="column">
Third column
</div>
<div class="column">
Fourth column
</div>
</div>
I’ve also added a border around the columns to make them more apparent.
<p class="notification is-success">First column</p>
<div class="column is-half">
<p class="notification is-success">Second column</p>
</div>
  • is-two-thirds
  • is-half
  • is-one-third
  • is-one-quarter
  • is-four-fifths
  • is-three-fifths
  • is-two-fifths
  • is-one-fifth

Hero

Finally, let’s also learn how to create a hero in Bulma. We’ll use the semantic <section>, and give it a class of hero and is-info to give it some color. We also need to add a <div> child with the class hero-body.

<section class="hero is-success">
<div class="hero-body"></div>
</section>
<div class="container">
<h1 class="title">
Primary title
</h1>
<h2 class="subtitle">
Primary subtitle
</h2>
</div>
<section class="hero is-info is-medium">
...
</section>

Be sure to check out the free Bulma course on Scrimba if you want to learn more!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store