Bulma Modifiers: A Complete Guide With Examples

Bulma Modifiers

Bulma modifiers are 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 styles of buttons:

Primary,Link,Info,Success,Warning, Danger, etc.

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

<element class="button is-{primary | secondary | is-link | is-info | is-success | is-warning | is-danger } ">Button</element>        

Source Code

?Download

<div class="container">
   <div class="columns is-mobile">
      <div class="column">
         <button class="button is-primary">Primary</button>
      </div>
      <div class="column">
         <button class="button is-link">Link</button>
      </div>
      <div class="column">
         <button class="button is-info">Info</button>
      </div>
   </div>
   <div class="columns is-mobile">
      <div class="column">
         <button class="button is-success">Success</button>
      </div>
      <div class="column">
         <button class="button is-warning">Warning</button>
      </div>
      <div class="column">
         <button class="button is-danger">Danger</button>
      </div>
   </div>
</div>        

Button Size

There are the following types of button sizes such as small buttons, medium buttons, and large buttons.

Primary, Link, Info

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

<elementclass="button is-{small | medium | large}">Button Size</element>        

Source Code

<div class="columns is-multiline has-text-centered mt-5 is-mobile">
   <div class="column is-4">
      <button type="button" class="button is-primary is-small">Primary</button>
   </div>
   <div class="column is-4">
      <button type="button" class="button is-link is-medium">Link</button>
   </div>
   <div class="column is-4">
      <button type="button" class="button is-info is-large">Info</button>
   </div>
</div>        

Button: States

There are mainly following types of the button states such as :

is-outlined , is-loading , [disabled]

Primary,Link,Info

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

<element class="btn is-{primary | success | info | danger | warning | link} is-{outline | lodaing }"></element>        

Source Code

<divclass="columns is-multiline has-text-centered mt-5 is-mobile">
    <divclass="column is-4">
        <buttontype="button"class="button is-primary is-outlined">Primary</button>
    </div>

    <divclass="column is-4">
        <buttontype="button"class="button is-link is-loading">Link</button>
    </div>

    <divclass="column is-4">
       <buttontype="button"class="button is-info"disabled>Info</button>
    </div>

</div>        

To learn more about Bulma modifiers, click here.