Bulma is an Open source CSS framework developed by Jeremy Thomas. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.
Tabs in Bulma are simple responsive horizontal navigation tabs with different styles. They require the following structure:
- A container for the tabs.
- The HTML <ul> element for holding the tags.
- A list of <li> elements for each tag.
- HTML anchor elements <a> for each tag link.
Variable Used:
| Variable-Name | Description | Type | Value | Computed Value | Computed Type |
|---|---|---|---|---|---|
| $tabs-border-bottom-color | This variable is used to define the color of the bottom border. | variable | $border | hsl(0, 0%, 86%) | color |
| $tabs-border-bottom-style | This variable is used to define the style of the bottom border. | string | solid | ||
| $tabs-border-bottom-width | This variable is used to define the width of the bottom border. | size | 1px | ||
| $tabs-link-color | This variable is used to define the color of the link. | variable | $text | hsl(0, 0%, 29%) | color |
| $tabs-link-hover-border-bottom-color | This variable is used to define the color to the bottom border of the link on hover | variable | $text-strong | hsl(0, 0%, 21%) | color |
| $tabs-link-hover-color | This variable is used to define the color of the link on hover. | variable | $text-strong | hsl(0, 0%, 21%) | color |
| $tabs-link-active-border-bottom-color | This variable is used to define the color of the bottom border of the active link. | variable | $link | hsl(229, 53%, 53%) | color |
| $tabs-link-active-color | This variable is used to define the color of the active link. | variable | $link | hsl(229, 53%, 53%) | color |
| $tabs-link-padding | This variable is used to define the padding of the link. | size | 0.5em 1em | ||
| $tabs-boxed-link-radius | This variable is used to define the radius of the link. | variable | $radius | 4px | size |
| $tabs-boxed-link-hover-background-color | This variable is used to define the background color of the link on hover. | variable | $background | hsl(0, 0%, 96%) | color |
| $tabs-boxed-link-hover-border-bottom-color | This variable is used to define the color of the bottom border of the link on hover. | variable | $border | hsl(0, 0%, 86%) | color |
| $tabs-boxed-link-active-background-color | This variable is used to define the background color of the active link. | variable | $scheme-main | hsl(0, 0%, 100%) | color |
| $tabs-boxed-link-active-border-color | This variable is used to define the border color of the link. | variable | $border | hsl(0, 0%, 86%) | color |
| $tabs-boxed-link-active-border-bottom-color | This variable is used to define the color of the bottom border of the active link | string | transparent | ||
| $tabs-toggle-link-border-color | This variable is used to define the color of the border of the link When we toggle. | variable | $border | hsl(0, 0%, 86%) | color |
| $tabs-toggle-link-border-style | This variable is used to define the style of the border on a toggle | string | solid | ||
| $tabs-toggle-link-border-width | This variable is used to define the width of the border of the link on a toggle | size | 1px | ||
| $tabs-toggle-link-hover-background-color | This variable is used to define the background color of the link on hover on a toggle | variable | $background | hsl(0, 0%, 96%) | color |
| $tabs-toggle-link-hover-border-color | This variable is used to define the color of the border of the link on the toggle. | variable | $border-hover | hsl(0, 0%, 71%) | color |
| $tabs-toggle-link-radius | This variable is used to define the radius on a toggle. | variable | $radius | 4px | size |
| $tabs-toggle-link-active-background-color | This variable is used to define the background color of the active link on a toggle. | variable | $link | hsl(229, 53%, 53%) | color |
| $tabs-toggle-link-active-border-color | This variable is used to define the color of the active border on a toggle | variable | $link | hsl(229, 53%, 53%) | color |
| $tabs-toggle-link-active-color | This variable is used to define the color of the active link on a toggle. | variable | $link-invert | #fff | color |
Example 1: In the below code, we will make use of the above variable to demonstrate tab.
<!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>
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
</head>
<body>
<center>
<h1 class="title" style="color:green;" >
GeeksforGeeks
</h1>
<h3 class="subtitle">
A computer science portal for geeks
</h3>
<div class='container'>
<div class="columns is-centered">
<div class="column is-10">
<div class="tabs">
<ul>
<li class="is-active"><a>Home</a>
</li>
<li><a>Articles</a></li>
<li><a>Lectures</a></li>
<li><a>Documentation</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
</center>
</body>
</html>
SCSS Code:
$tabs-link-padding:10px;
li {
padding:$tabs-link-padding;
}
Compiled CSS Code:
li {
padding: 10px;
}
Output:
Example 2: In the below code, we will make use of the above variable to demonstrate Tab.
<!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>
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
</head>
<body>
<center>
<h1 class="title" style="color:green;" >
GeeksforGeeks
</h1>
<h3 class="subtitle">
A computer science portal for geeks
</h3>
<div class='container'>
<div class="columns is-centered">
<div class="column is-10">
<div class="tabs">
<ul>
<li class="is-active"><a>Home</a>
</li>
<li><a>Articles</a></li>
<li><a>Lectures</a></li>
<li><a>Documentation</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
</center>
</body>
</html>
SCSS Code:
$tabs-boxed-link-active-border-color:2px solid green;
li {
border:$tabs-boxed-link-active-border-color;
}
Compiled CSS Code:
li {
border: 2px solid green;
}
Output:
Reference: https://bulma.io/documentation/components/tabs/#variables
