You are viewing the deprecated 0.5.1 version of the website. Click here to view the latest version


Everything you need to create a website with Bulma


Just import what you need

Bulma consists of 29 .sass files that you can import individually.

For example, let's say you only want the Bulma columns.
The file is located in the bulma/sass/grid folder.
Simply import the utilities dependencies, and then the files you need directly:

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

Now you can use the classes .columns (for the container) and .column directly:

<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>

What if you only want the button styles instead?

@import "bulma/sass/utilities/_all"
@import "bulma/sass/elements/button.sass"

You can now use the .button class, and all its modifiers:

  • .is-active
  • .is-primary, .is-info, .is-success...
  • .is-small, .is-medium, .is-large
  • .is-outlined, .is-inverted, .is-link
  • .is-loading, [disabled]
<a class="button">

<a class="button is-primary">
  Primary button

<a class="button is-large">
  Large button

<a class="button is-loading">
  Loading button

This page is open source. Noticed a typo? Or something unclear? Improve this page on GitHub

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!