Bulma | Tags

Bulma is a free, open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.
The Bulma tag is a small element that is very useful to attach information to a block or other component.

Example 1: Simple Tag elements

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  <head>
    <title>Bulma Tag</title>
    <link rel='stylesheet' 
          href=
    <!-- custom css -->
    <style>
      div.columns{
        margin-top: 50px;
      }
   
      h1{
        color:green !important;
        margin-bottom: 20px;
      }
  
      span{
        margin-right:5px;
      }
  
    </style>
  </head>
  <body>
    <div class='container has-text-centered'>
      <div class='columns is-mobile is-centered'>
        <div class='column is-8'>
          <div>
            <h1 class='title'>Tag Elements</h1>
            <hr>
          </div>
  
          <div>
            <span class="tag">
              Tag1
            </span>
            <span class="tag">
              Tag2
            </span>
            <span class="tag">
              Tag3
            </span>
            <span class="tag">
              Tag4
            </span>
            <span class="tag">
              Tag5
            </span>
            <span class="tag">
              Tag6
            </span>
            <span class="tag">
              Tag7
            </span>
            <span class="tag">
              Tag8
            </span>
            <span class="tag">
              Tag9
            </span>
            <span class="tag">
              Tag10
            </span>
          </div>
        </div>
      </div>
    </div>
    </div>
  </body>
</html>

chevron_right


Output:

Example 2: Coloured Tag elements

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  <head>
    <title>Bulma Tag</title>
    <link rel='stylesheet' href=
    <!-- custom css -->
    <style>
      div.columns{
        margin-top: 50px;
      }
   
      h1{
        color:green !important;
        margin-bottom: 20px;
      }
  
      span{
        margin-right:5px;
      }
  
    </style>
  </head>
  <body>
    <div class='container has-text-centered'>
      <div class='columns is-mobile is-centered'>
        <div class='column is-8'>
          <div>
            <h1 class='title'>Coloured Tag Elements</h1>
            <hr>
          </div>
  
          <div>
            <span class="tag is-primary">
              Primary
            </span>
            <span class="tag is-info">
              Info
            </span>
            <span class="tag is-link">
              Link
            </span>
            <span class="tag is-success">
              Success
            </span>
            <span class="tag is-black">
              Black
            </span>
  
            <span class="tag is-dark">
              Dark
            </span>
            <span class="tag is-light">
              Light
            </span>
            <span class="tag is-white">
              White
            </span>
            <span class="tag is-warning">
              Warning
            </span>
            <span class="tag is-danger">
              Danger
            </span>
          </div>
        </div>
      </div>
    </div>
    </div>
  </body>
</html>

chevron_right


Output:



Example 3: Different sizes Tag elements

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  <head>
    <title>Bulma Tag</title>
    <link rel='stylesheet' href=
    <!-- custom css -->
    <style>
      div.columns{
        margin-top: 50px;
      }
   
      h1{
        color:green !important;
        margin-bottom: 20px;
      }
  
      span{
        margin-right:5px;
      }
  
    </style>
  </head>
  <body>
    <div class='container has-text-centered'>
      <div class='columns is-mobile is-centered'>
        <div class='column is-8'>
          <div>
            <h1 class='title'>
                Different sizes Tag Elements
            </h1>
            <hr>
          </div>
  
          <div>
            <span class="tag is-primary is-normal">
              Normal
            </span>
            <span class="tag is-info is-medium">
              Medium
            </span>
            <span class="tag is-link is-large">
              Large
            </span>
              
          </div>
        </div>
      </div>
    </div>
    </div>
  </body>
</html>

chevron_right


Output:

Example 4: Rounded Tag elements

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  <head>
    <title>Bulma Tag</title>
    <link rel='stylesheet' href=
    <!-- custom css -->
    <style>
      div.columns{
        margin-top: 50px;
      }
   
      h1{
        color:green !important;
        margin-bottom: 20px;
      }
  
      span{
        margin-right:5px;
      }
  
    </style>
  </head>
  <body>
    <div class='container has-text-centered'>
      <div class='columns is-mobile is-centered'>
        <div class='column is-8'>
          <div>
            <h1 class='title'>Rounded Tag Elements</h1>
            <hr>
          </div>
  
          <div>
            <span class="tag is-primary is-rounded">
              Primary
            </span>
            <span class="tag is-info is-rounded">
              Info
            </span>
            <span class="tag is-link is-rounded">
              Link
            </span>
            <span class="tag is-success is-rounded">
              Success
            </span>
            <span class="tag is-black is-rounded">
              Black
            </span>
             <span class="tag is-warning is-rounded">
              Warning
            </span>
            <span class="tag is-danger is-rounded">
              Danger
            </span>
          </div>
        </div>
      </div>
    </div>
    </div>
  </body>
</html>

chevron_right


Output:

Example 5: Text tag element with delete tag element

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  <head>
    <title>Bulma Tag</title>
    <link rel='stylesheet' href=
    <!-- custom css -->
    <style>
      div.columns{
        margin-top: 50px;
      }
   
      h1{
        color:green !important;
        margin-bottom: 20px;
      }
  
      div.tags{
        display:flex;
        float:left;
        margin-right:10px;
      }
  
    </style>
  </head>
  <body>
    <div class='container has-text-centered'>
      <div class='columns is-mobile is-centered'>
        <div class='column is-8'>
          <div>
            <h1 class='title'>
 Text Tag Element with Delete Tag Element 
            </h1>
            <hr>
          </div>
  
          <div>
            <div class="tags has-addons">
              <span class="tag is-link">Javascript</span>
              <a class="tag is-delete"></a>
            </div>
  
            <div class="tags has-addons">
              <span class="tag is-link">Node.Js</span>
              <a class="tag is-delete"></a>
            </div>
  
            <div class="tags has-addons">
              <span class="tag is-link">Angular</span>
              <a class="tag is-delete"></a>
            </div>
  
            <div class="tags has-addons">
              <span class="tag is-link">React</span>
              <a class="tag is-delete"></a>
            </div>
  
            <div class="tags has-addons">
              <span class="tag is-link">Vue</span>
              <a class="tag is-delete"></a>
            </div>
  
            <div class="tags has-addons">
              <span class="tag is-link">Bulma Css</span>
              <a class="tag is-delete"></a>
            </div>
  
            <div class="tags has-addons">
              <span class="tag is-link">Mongo DB</span>
              <a class="tag is-delete"></a>
            </div>
              
            <div class="tags has-addons">
              <span class="tag is-link">Python</span>
              <a class="tag is-delete"></a>
            </div>
              
          </div>
        </div>
      </div>
    </div>
    </div>
  </body>
</html>

chevron_right


Example 6: Tags attach together

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  <head>
    <title>Bulma Tag</title>
    <link rel='stylesheet' href=
    <!-- custom css -->
    <style>
      div.columns{
        margin-top: 50px;
      }
   
      h1{
        color:green !important;
        margin-bottom: 20px;
      }
  
      div.tags{
        display:flex;
        float:left;
        margin-right:10px;
      }
  
    </style>
  </head>
  <body>
    <div class='container has-text-centered'>
      <div class='columns is-mobile is-centered'>
        <div class='column is-8'>
          <div>
            <h1 class='title'>Tags attach together</h1>
            <hr>
          </div>
  
          <div class="control">
            <div class="tags has-addons">
              <span class="tag is-success">Yes</span>
              <span class="tag is-danger">No</span>
            </div>
  
            <div class="tags has-addons">
              <span class="tag is-info">Show</span>
              <span class="tag is-warning">Hide</span>
            </div>
  
            <div class="tags has-addons">
              <span class="tag is-success">Node.Js</span>
              <span class="tag is-danger">NPM</span>
            </div>
  
            <div class="tags has-addons">
              <span class="tag is-primary">CSS</span>
              <span class="tag is-info">Bulma</span>
            </div>
  
            <div class="tags has-addons">
              <span class="tag is-warning">Javascript</span>
              <span class="tag is-danger">Angular</span>
            </div>
  
            <div class="tags has-addons">
              <span class="tag is-warning">Javascript</span>
              <span class="tag is-primary">React</span>
            </div>
              
          </div>
        </div>
      </div>
    </div>
    </div>
  </body>
</html>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.