Bulma Tags Variables

Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior.

The Bulma tag is a small element that is very useful to attach information to a block or other component.

Variable table:

Variable-Name	Description	Type	Value	Computed Value	Computed Type
$tag-background-color	This variable is used to color the background of the tag.	variable	$background	hsl(0, 0%, 96%)	color
$tag-color	This variable is used to define the color of the tag.	variable	$text	hsl(0, 0%, 29%)	color
$tag-radius	This variable is used to define the radius of the tag.	variable	$radius	4px	size
$tag-delete-margin	This variable is used to define the delete margin of the tag.	size	1px
$tag-colors	This variable is used to define the colors of the tag	variable	$colors	Bulma colors	map

Example 1: In the below code, we will make use of the above variable to demonstrate the use of tags.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width,initial-scale=1">
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Bulma Variable</title>
</head>

<body>
    <center>
        <h1 class="title" style="color:green;" >
            GeeksforGeeks
        </h1>
        
        <h3 class="subtitle">
            A computer science portal for geeks
        </h3>
    
        <div class="tag">
            Tag1
        </div>    
    </center>
</body>
</html>

SCSS Code:

$tag-background-color: hsl(0, 0%, 96%);
.tag {
   background-color: $tag-background-color;
}

Compiled CSS Code:

.tag {
    background-color: whitesmoke; 
}

Output:

Example 2: In the below code, we will make use of the above variable to demonstrate the use of tags.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width,initial-scale=1">
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Bulma Variable</title>
</head>

<body>
    <center>
        <h1 class="title" style="color:green;" >
            GeeksforGeeks
        </h1>
        
        <h3 class="subtitle">
            A computer science portal for geeks
        </h3>
    
        <div class="tag">
            GfG
        </div>    
    </center>
</body>
</html>

SCSS Code:

$tag-color: hsl(0, 0%, 29%);
div {
   color:$tag-color;
}

Compiled CSS Code:

div {
    color: #4a4a4a; 
}

Output:

Reference: https://bulma.io/documentation/elements/tag/#variables

Explore