In Bulma, tags are very useful. It can be used to attach information to a block or other component. Tags are mainly available in three sizes normal, medium and large. The default size of tags is normal, is-normal modifier is used if we have to reset the size of the tag to normal.
Bulma Tags Size classes:
- is-normal: It is the default size of tags.
- is-medium: It is used to give a medium size to tags.
- is-large: It is used to give a large size to tags.
Syntax:
<li class="tag Tags-Size-class">
......
</li>
Example 1: The following code demonstrates the is-normal,is-medium,is-large classes of Bulma tag size.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Bulma Tag Size</ title >
< link rel = 'stylesheet'
href =
</ head >
< body >
< li class = "tag is-primary is-normal" >
GeeksforGeeks
</ li >
< li class = "tag is-primary is-medium" >
GeeksforGeeks
</ li >
< li class = "tag is-primary is-large" >
GeeksforGeeks
</ li >
</ body >
</ html >
|
Output:
Bulma Tag Size
Example 2: We can also change the tag size at once.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Bulma Tag Size</ title >
< link rel = 'stylesheet'
href =
</ head >
< body >
< h1 class = "title is-5" >All Tags of Normal Size</ h1 >
< div class = "tags are-normal" >
< li class = "tag is-primary" >
GeeksforGeeks
</ li >
< li class = "tag is-primary" >
GeeksforGeeks
</ li >
< li class = "tag is-primary" >
GeeksforGeeks
</ li >
</ div >
< h1 class = "title is-5" >
All Tags of Medium Size
</ h1 >
< div class = "tags are-medium" >
< li class = "tag is-primary" >
GeeksforGeeks
</ li >
< li class = "tag is-primary" >
GeeksforGeeks
</ li >
< li class = "tag is-primary" >
GeeksforGeeks
</ li >
</ div >
< h1 class = "title is-5" >
All Tags of Large Size
</ h1 >
< div class = "tags are-large" >
< li class = "tag is-primary" >
GeeksforGeeks
</ li >
< li class = "tag is-primary" >
GeeksforGeeks
</ li >
< li class = "tag is-primary" >
GeeksforGeeks
</ li >
</ div >
</ body >
</ html >
|
Output:
Bulma Tag Size
Reference Link: https://bulma.io/documentation/elements/tag/#sizes
Last Updated :
24 Jan, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...