Bulma Tags

The Bulma tags are a small but versatile element. It is used to attach the information in the form of a block.

Please keep in mind that, The default tag label height is 1.5 rem.

General Syntax

      
        <element class="tag">Tag Label</element>      
    
Try it now

Source Code

          
            <div class="container">
  <div class="columns">
    <div class="column">
      <span class="tag">Learn HTML5</span>
    </div>
    <div class="column">
      <span class="tag">Learn CSS3</span>
    </div>
    <div class="column">
      <span class="tag">Learn JS</span>
    </div>
    <div class="column">
      <span class="tag">Learn Ajax</span>
    </div>
  </div>
</div>          
        
Try it now

Source Code : Output

Learn HTML5
Learn CSS3
Learn JS
Learn Ajax

Bulma CSS Tag Color

To change the tag color use the following modifier class as is-black, is-dark, is-light, is-white, is-primary, is-link, is-info, is-success, is-warning,is-warning.

Example

HTML5
CSS3
JS
Ajax
JSON
MySQL
Bootstrap4
Bootstrap5
Bulma
Pure

General Syntax

      
        <element class="tag is-{black | dark | light | white | primary | link | info | success | warning | danger }"></element>      
    
Try it now

Source Code

          
            <div class="container">
  <div class="columns is-mobile">
    <div class="column">
      <span class="tag is-black">Learn HTML5</span>
    </div>
    <div class="column">
      <span class="tag is-dark">Learn CSS3</span>
    </div>
    <div class="column">
      <span class="tag is-light">Learn JS</span>
    </div>
    <div class="column">
      <span class="tag is-white">Learn Ajax</span>
    </div>
  </div>
</div>          
        
Try it now

Source Code : Output

Learn HTML5
Learn CSS3
Learn JS
Learn Ajax

You can also change the all tag size at once using .are-medium & .are-large modifier class.

General Syntax

      
        <element class="tags  are-{medium | large }"></element>      
    
Try it now

Source Code

          
            <div class="container">
  <div class="columns is-mobile">
    <div class="column">
      <div class="tags are-medium">
        <span class="tag">Medium</span>
        <span class="tag is-normal">Normal</span>
        <span class="tag">Medium</span>
        <span class="tag is-large">Large</span>
        <span class="tag">Medium</span>
      </div>
    </div>
  </div>
</div>          
        
Try it now

Source Code : Output

Medium Normal Medium Large Medium

Rounded Tag

To create a rounded tag, use .is-rounded modifier class.

Example

Rounded Tag

General Syntax

      
        <element class="tag is-rounded"></element>      
    
Try it now

Source Code

          
            <div class="container">
  <div class="columns is-mobile  is-multiline is-centered">
    <div class="column  is-half-mobile">
      <element class="tag is-rounded">Learn HTML5</element>
    </div>
    <div class="column  is-half-mobile">
      <element class="tag is-rounded">Learn CSS3</element>
    </div>
    <div class="column  is-half-mobile">
      <element class="tag is-rounded">Learn Tailwind CSS</element>
    </div>
  </div>
</div>          
        
Try it now

Source Code : Output

Learn HTML5
Learn CSS3
Learn Tailwind CSS

Bulma CSS Delete Tag

To create a delete tag, use the .is-delete modifier class.

Example

Learn HTML5
Learn CSS3
Learn Tailwind CSS

General Syntax

      
        <element class="tag is-delete">Delete Tag</element>      
    
Try it now

Source Code

          
            <div class="container">
  <div class="columns is-mobile is-multiline is-centered">
    <div class="column is-half-mobile">
      <element class="tag is-delete">Learn HTML5</element>
    </div>
    <div class="column is-half-mobile">
      <element class="tag is-delete">Learn CSS3</element>
    </div>
    <div class="column is-half-mobile">
      <element class="tag is-delete">Learn Tailwind CSS</element>
    </div>
  </div>
</div>          
        
Try it now

Source Code : Output

Learn HTML5
Learn CSS3
Learn Tailwind CSS
Web Tutorials
Bulma Tags
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4