Open In App

Bulma Tags Sizes

Improve
Improve
Like Article
Like
Save
Share
Report

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 Tags Sizes

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>
    <!-- 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:

Bulma Tags Sizes

Bulma Tag Size

Reference Link: https://bulma.io/documentation/elements/tag/#sizes



Last Updated : 24 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads