Bulma Modifiers Syntax
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/
Please Login to comment...