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 >
< link rel = "stylesheet" href =
</ head >
< body >
< br >
< div class = "content" >
< h1 style = "color:green" >
GeeksforGeeks
</ h1 >
< strong >
Color Modifiers
</ strong >
</ div >
< 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 >
< 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
Share your thoughts in the comments
Please Login to comment...