Bulma Modifiers

Bulma Modifiers

Bulma modifier syntax is basically started with either is- or has-.It is used to provide alternative styles to HTML elements.

Bulma provides following modifiers that is useful for :

  1. Button Colors
  2. Text Colors
  3. Responsive Layout

Button Styles

Bulma CSS provides different style of buttons:


To create button with different style use the followings predefined button helper classes: is-primary, is-link, is-info, is-success, is-warning, is-danger.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Button Size

There are following types of button size such as small button,medium button, and large button.

Bulma Button: Size

Follow the following steps to create different size buttons:

  • Steps 1: Assign .button class as well as .is-* class to the button element base class.
  • Steps 2: Here * denotes { small | medium | large }

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Button: States

There are mainly following types of the button states such as :is-outlined , is-loading , [disabled]

To create different states of button, you have to follow the following steps:

  • Step 1: Assign, .button, is-{outlined| loading|} to create outline button states as well as loading button states Correspondingly.
  • Step 2: To provide different background-color to the button , assign .is-{primary | success | info | danger | warning | link} to the <button> element base class.
  • Step 3: To create a disabled button, assign disabled property to the button element.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output