--- layout: documentation doc-tab: modifiers doc-subtab: syntax --- {% include subnav-modifiers.html %}

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:

{% capture button_example %} Button {% endcapture %}

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

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

{% capture button_primary_example %} Button {% endcapture %}

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

You can use one of the 5 main colors:

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

You can also alter the size:

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

Or the style or state:

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