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 =
</ 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...