Bulma Tags Colors

Last Updated : 30 Jan, 2022

Bulma tags are very useful to attach information to a block or other component. Tags are small in comparison to buttons which makes it more appropriate for a long list of items and display numbers.

In this article, we will learn about the different colors of tags.

Bulma Tags Colors Classes:

is-white: This class is used to set the white color of the tag.
is-black: This class is used to set the black color of the tag.
is-light: This class is used to set the light color of the tag.
is-dark: This class is used to set the dark color of the tag.
is-text: This class is used to set the text-like appearance of the tag.
is-primary: This class is used to set the primary color of the tag.
is-link: This class is used to set the link color of the tag.
is-info: This class is used to set the info color of the tag.
is-success: This class is used to set the success color of the tag.
is-warning: This class is used to set the warning color of the tag.
is-danger: This class is used to set the danger color of the tag.

Syntax:

<li class="tag is-white">...</li>

Example 1: The below example shows the use of tag color classes in Bulma

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Tag Colors</title> 
    <link rel='stylesheet' href= 
    'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
<body> 
    <li class="tag is-black">GeeksforGeeks</li> 
    <li class="tag is-dark">GeeksforGeeks</li> 
    <li class="tag is-light">GeeksforGeeks</li> 
    <li class="tag is-white">GeeksforGeeks</li> 
</body> 
  
</html> 

Output:

Bulma Tags Colors

Example 2: The following demonstrates the other tag colors.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Tag color</title> 
    <link rel='stylesheet' href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
  
<body class="has-text-centered">     
    <h2 class="is-size-2 has-text-success"> 
      GeeksforGeeks 
    </h2> 
    <b>Bulma Tags Colors</b><br/> 
    <div class="container"> 
        <li class="tag is-primary">GeeksforGeeks</li> 
        <li class="tag is-link">GeeksforGeeks</li> 
        <li class="tag is-info">GeeksforGeeks</li> 
        <li class="tag is-success">GeeksforGeeks</li> 
        <li class="tag is-warning">GeeksforGeeks</li> 
        <li class="tag is-danger">GeeksforGeeks</li> 
    </div> 
</body> 
</html>

Output:

Bulma Tags Colors

Example 3: We can also add a light version to the tag’s color using is-light to the color modifier.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Tag color</title> 
    <link rel='stylesheet' href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
  
<body class="has-text-centered"> 
      
    <h2 class="is-size-2 has-text-success"> 
      GeeksforGeeks 
    </h2> 
    <b>Bulma Tags Colors</b><br/> 
    <div class="container"> 
        <li class="tag is-primary is-light">GeeksforGeeks</li> 
        <li class="tag is-link is-light">GeeksforGeeks</li> 
        <li class="tag is-info is-light">GeeksforGeeks</li> 
        <li class="tag is-success is-light">GeeksforGeeks</li> 
        <li class="tag is-warning is-light">GeeksforGeeks</li> 
        <li class="tag is-danger is-light">GeeksforGeeks</li> 
    </div> 
</body> 
</html>