Bulma v0.6.2: a modern CSS framework based on Flexbox

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

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

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>

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-`.

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-`.