You are viewing the deprecated 0.7.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-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-loading">
  Button
</a>
<a class="button" disabled>
  Button
</a>
As a result, it's very easy to combine modifiers:
<a class="button is-primary is-small" disabled>
  Button
</a>
<a class="button is-info is-loading">
  Button
</a>
<a class="button is-danger is-outlined is-large">
  Button
</a>

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#
New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!