Skip to content
Related Articles

Related Articles

Bulma | Tags
  • Last Updated : 24 Jun, 2020

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
Recommended Articles
Page :