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=
</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=
</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=
</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>
|
Output:
Bulma Tags Colors
Reference Link: https://bulma.io/documentation/elements/tag/#colors