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

New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

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

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

Bulma Sponsors

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!