Open In App

Bulma Modifiers Syntax

Improve
Improve
Like Article
Like
Save
Share
Report

Modifiers in Bulma are used to manipulate a particular class in order to get the desired output. To implement the modifiers, one has to either use the is- or the has- modifier class before the modifier name. It is essential to know the syntax of these modifiers in order to implement them in our code.

Syntax:

<div class = "is-modifier-name"
    ...
</div>

or 
    
<div class = "has-modifier-name"
    ...
</div>
  • is-modifier-name: This modifier-name takes various values like is-primary, is-link, is-info, is-success, is-warning, is-danger, etc.
  • has-modifier-name: This modifier-name takes various values like has-primary, has-link, has-info, has-success, has-warning, has-danger, etc.

Let us dive deep into this topic, by having a look at a practical example of modifiers.  

Example 1: In the below example, we have used color modifiers in order to make the columns colorful and give a background color. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!--Adding Bulma-->
    <link rel="stylesheet" href=
</head>
  
<body>
    <br>
    <div class="content">
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
        <strong>
            Color Modifiers
        </strong>
    </div>
  
    <!--Modifier for background color -->
    <section class="section has-background-light ">
        <div class="container ">
            <span class="title">
                Popular Sportsman
            </span><br><br>
  
            <div class="columns ">
                <div class="column">
                    <div class="notification is-info"
                        style="width: 160px;">
                        <p>Virat</p>
                    </div>
  
                    <div class="column">
                        <div class="notification is-danger"
                            style="width: 160px;">
                            <p>Messi</p>
                        </div>
  
                        <div class="column">
                            <div class="notification is-primary"
                                style="width: 160px;">
                                <p>Nadal</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
  
</html>


Output:

Example 2: Let us now look at another example, in which we will be creating buttons and use size modifiers in order to have buttons of different sizes.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!--Linking Bulma -->
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="content">
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
        <strong>Size Modifiers</strong>
    </div>
    <br />
  
    <button class="button is-medium is-danger">
        This is medium
    </button>
    <br /><br />
  
    <button class="button is-success">
        This is regular
    </button>
    <br /><br />
  
    <button class="button is-small is-link">
        This is small
    </button>
    <br /><br />
  
    <button class="button is-large is-warning">
        This is large
    </button>
    <br />
</body>
  
</html>


Output:

Reference Link: https://bulma.io/documentation/overview/modifiers/



Last Updated : 02 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads