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

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:

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

Bulma Newsletter

Get notified when v1 is ready!