πŸŽ‰ Bulma v1 is coming soon!

and much more…

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:

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

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

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

You can use one of the 6 main colors:

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

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

You can also alter the size:

  • is-small
  • is-medium
  • is-large

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

Or the style or state:

  • is-outlined
  • is-loading
  • [disabled]

<button class="button is-primary is-outlined">
  Button
</button>
<button class="button is-loading">
  Button
</button>
<button class="button" disabled>
  Button
</button>
As a result, it's very easy to combine modifiers:

<button class="button is-primary is-small" disabled>
  Button
</button>
<button class="button is-info is-loading">
  Button
</button>
<button class="button is-danger is-outlined is-large">
  Button
</button>

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

#native_company# #native_desc#
#native_cta#