You can use one of the 6 main colors:
is-primaryis-linkis-infois-successis-warningis-danger
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 class="button">
Button
</button>By adding the "is-primary" CSS class, you can modify the color:
<button class="button is-primary">
Button
</button>
<button class="button is-primary">
Button
</button>
<button class="button is-link">
Button
</button>
<button class="button is-info">
Button
</button>
<button class="button is-success">
Button
</button>
<button class="button is-warning">
Button
</button>
<button class="button is-danger">
Button
</button>You can also alter the size:
is-smallis-mediumis-large
<button class="button is-small">
Button
</button>
<button class="button">
Button
</button>
<button class="button is-medium">
Button
</button>
<button class="button is-large">
Button
</button>Or the style or state:
is-outlinedis-loading[disabled]
<button class="button is-primary is-outlined">
Button
</button>
<button class="button is-loading">
Button
</button>
<button class="button" disabled>
Button
</button>
As a result, it's very easy to combine modifiers:
<button class="button is-primary is-small" disabled>
Button
</button>
<button class="button is-info is-loading">
Button
</button>
<button class="button is-danger is-outlined is-large">
Button
</button>
This page is open source.
Noticed a typo? Or something unclear?
Improve this page on GitHub
