Skip to content
Related Articles

Related Articles

Bulma Tabs Variables

Improve Article
Save Article
  • Last Updated : 01 Sep, 2022
Improve Article
Save Article

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.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width,initial-scale=1">
    <link rel="stylesheet" href=
    <link rel="stylesheet" href="style.css">
      
    <title>Bulma Variable</title>
    <!-- font-awesome cdn -->
    <script src=
    </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.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width,initial-scale=1">
    <link rel="stylesheet" href=
    <link rel="stylesheet" href="style.css">
      
    <title>Bulma Variable</title>
    <!-- font-awesome cdn -->
    <script src=
    </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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!