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

Download

          
            <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

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

Download

          
            <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

Download

          
            <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

Download

          
            <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

Download

          
            <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

Bulma Tags

Bulma CSS Tag Color

Example

Rounded Tag

Example

Bulma CSS Delete Tag

Example

Web Tutorials