Bulma Tags Sizes
Last Updated :
24 Jan, 2022
Improve
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.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Tag Size</title>
<link rel='stylesheet'
href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</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:
Example 2: We can also change the tag size at once.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Tag Size</title>
<link rel='stylesheet'
href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</head>
<body>
<h1 class="title is-5">All Tags of Normal Size</h1>
<!-- All tags will be of normal size -->
<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>
<!-- All tags will be of medium size -->
<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>
<!-- All tags will be of large size -->
<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:
Reference Link: https://bulma.io/documentation/elements/tag/#sizes
