Modifiers syntax

Most Bulma elements have alternative styles. To apply them, you only need to append one of the modifier classes.
They all start with `is-` or `has-`.

Let's start with a simple button that uses the "button" CSS class:

<a class="button">
  Button
</a>

By adding the "is-primary" CSS class, you can modify the color:

Button

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

You can use one of the 6 main colors:

is-primary
is-link
is-info
is-success
is-warning
is-danger

Button

<a class="button is-primary">
  Button
</a>
<a class="button is-info">
  Button
</a>
<a class="button is-success">
  Button
</a>
<a class="button is-warning">
  Button
</a>
<a class="button is-danger">
  Button
</a>
        

You can also alter the size:

is-small
is-medium
is-large

Button

<a class="button is-small">
  Button
</a>
<a class="button">
  Button
</a>
<a class="button is-medium">
  Button
</a>
<a class="button is-large">
  Button
</a>

Or the style or state:

is-outlined
is-loading
[disabled]

Button

<a class="button is-primary is-outlined">
  Button
</a>
<a class="button is-primary is-loading">
  Button
</a>
<a class="button is-primary" disabled>
  Button
</a>

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

Bulma Partners

Check out their products!

Modifiers syntax

Most Bulma elements have alternative styles. To apply them, you only need to append one of the modifier classes. They all start with is- or has-.

Most Bulma elements have alternative styles. To apply them, you only need to append one of the modifier classes.
They all start with `is-` or `has-`.