Modularity

Bulma consists of 39 .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>
</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">
  Button
</a>

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

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

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