--- title: Modifiers syntax layout: documentation doc-tab: modifiers doc-subtab: syntax --- {% include subnav-modifiers.html %} {% capture button_example %} Button {% endcapture %} {% capture button_primary_example %} Button {% endcapture %}

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:

{% highlight html %}{{button_example}}{% endhighlight %}

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

{% highlight html %}{{button_primary_example}}{% endhighlight %}

You can use one of the 6 main colors:

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

Button

{% highlight html %} Button Button Button Button Button Button {% endhighlight %}

You can also alter the size:

is-small
is-medium
is-large

Button

{% highlight html %} Button Button Button Button {% endhighlight %}

Or the style or state:

is-outlined
is-loading
[disabled]

Button

{% highlight html %} Button Button Button {% endhighlight %}

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