Skip to content
Related Articles

Related Articles

Bulma Box Variables

View Discussion
Improve Article
Save Article
  • Last Updated : 26 Jul, 2022
View Discussion
Improve Article
Save Article

Bulma is a free, and open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.

The box element is simply a container with a shadow, a border, a radius, and some padding. We can use this in many places in our project design. It gives an interactive look to our project.

Variables:

Name Description Type Value Computed Value Computed Type
$box-color It is used to provide color to the box. variable           $text hsl(0, 0%, 29%) color
$box-background-color It is used to provide background color to the box. variable $scheme-main hsl(0, 0%, 100%) color
$box-radius It is used to define the radius of the box. variable $radius-large 6px size
$box-shadow It is used to define the shadow of the box. variable $shadow 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) shadow
$box-padding It is used to define the padding around the box. size 1.25rem    
$box-link-hover-shadow It is used to provide the shadow on the hover effect. shadow 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link.                  
$box-link-active-shadow It is used to provide shadows to the active links in the box. shadow inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link    

Example 1: This example creates a box container using Bulma and after that modifies the box using the variables.

HTML




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href="style.css">        
     <!-- font-awesome cdn -->
    <script src=
    </script>       
</head>
  
<body>
    <center>    
        <h1 class="title has-text-centered has-text-success">
            GeeksforGeeks
        </h1>
        <h3 class="subtitle has-text-centered">
            A computer science portal for geeks.
        </h3>
        <div class='container'>
            <div class='columns is-mobile is-centered'>
                <div class='column is-5'>
                    <div class='box'>
                        <h1 class='title'>
                            Geek for Geeks
                        </h1>    
                        <p class='is-family-monospace'>
                            'GeeksforGeeks' is a computer
                            science portal for geeks.
                        </p>
      
                        <div class='buttons'>
                            <button class='button is-fullwidth'>
                                Read more...
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>        
    </center>
</body>
</html>


SCSS Code:

$box-color:green;
.box{
    color:$box-color;
}

Compiled CSS Code:

.box {
    color: green; 
}

Output:

 

Example 2: This example creates a box container using Bulma and after that modifies the box using the variables.

HTML




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href="style.css">        
     <!-- font-awesome cdn -->
    <script src=
    </script>
    <style>
        .box {
            background-color: green;
          }
    </style>    
</head>
  
<body>
    <center>    
        <h1 class="title has-text-centered has-text-success">
            GeeksforGeeks
        </h1>
        <h3 class="subtitle has-text-centered">
            A computer science portal for geeks.
        </h3>
        <div class='container'>
            <div class='columns is-mobile is-centered'>
                <div class='column is-5'>
                    <div class='box'>
                        <h1 class='title'>
                            Geek for Geeks
                        </h1>    
                        <p class='is-family-monospace'>
                            'GeeksforGeeks' is a computer
                            science portal for geeks.
                        </p>
      
                        <div class='buttons'>
                            <button class='button is-fullwidth'>
                                Read more...
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>        
    </center>
</body>
</html>


SCSS Code:

$box-background-color:green;
.box{
    background-color:$box-background-color;
}

Compiled CSS Code:

.box {
    background-color: green; 
}

Output:

 

Reference: https://bulma.io/documentation/elements/box/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!