# Modifiers syntax | Bulma v0.5.0: a modern CSS framework based on Flexbox
Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.

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

Documentation

Everything you need to create a website with Bulma

# 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

    <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 5 main colors:

- `is-primary`
- `is-info`
- `is-success`
- `is-warning`
- `is-danger`

Button

Button

Button

Button

Button

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

Button

Button

Button

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

Button

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>

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!