Learn CSS with 🎓 online interactive courses,📺 educational videos, and 🧑🏻‍💻project-building tutorials.
Download

Sponsor

Route Planner and Route Optimizer

Bulma’s Modifiers Syntax


How to use Bulma components and their alternative styles

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>

You can use one of the 6 main colors:

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

<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-small
  • is-medium
  • is-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-outlined
  • is-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>

How to support Bulma

#native_company# #native_desc#
#native_cta#
Get started for Free
Get started for Free