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.
<!DOCTYPE html>
<html>
<head>
<!--Adding Bulma-->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
</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.
<!DOCTYPE html>
<html>
<head>
<!--Linking Bulma -->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" />
</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:
