Bulma Hero Variables

Last Updated : 03 Jul, 2022

In this article, we will learn how to include section variables on the webpage. 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. Another advantage with Bulma is that you simply need to have an understanding of HTML and CSS to implement this framework (Although knowing JavaScript can help the existing features according to your needs). Bulma also allows us to add our own CSS styling but it is advised to use an external stylesheet over inline styling.

Hero Variable?

Bulma Hero is an essential component with the help of which we can create a full-width banner on our webpage.

Syntax:

$variable-name: value of the variable;

Variable Used:

$hero-body-padding: This variable is used to define padding of 3rem from the top and 1.5rem from the right side.
$hero-body-padding-tablet: This variable is used to define padding of 3rem from the top and 3rem from the right side.
$hero-body-padding-small: This variable is used to define padding of 1.5rem from all the sides.
$hero-body-padding-medium: This variable is used to define padding of 9rem from the top and 4.5rem from the right side.
$hero-body-padding-large: This variable is used to define padding of 18rem from the top and 6rem from the right side.
$hero-colors: This variable is used to define colour.

Example 1: In the below code, we will use the hero variable to style the web page.

SCSS Code:

$hero-body-padding: 3rem 1.5rem;
$hero-colors: lightgreen;
.hero-head{
       padding:$hero-body-padding;
       color: $hero-colors;
}

CSS Code after compiling SCSS code:

.hero-head{
      padding: 3rem 1.5rem;
      color: lightgreen;
}

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= 
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> 
  
    <style> 
        .hero-head { 
            padding: 3rem 1.5rem; 
            color: lightgreen; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="font-size: 40px; color:green; "> 
            GeeksforGeeks 
        </h1><br> 
          
        <section class="hero is-success is-fullheight"> 
            <!-- Hero Head-->
            <div class="hero-head"> 
                <header class="navbar"> 
                    <div class="container"> 
                        <div class="navbar-brand"> 
                            <a class="navbar-item"> 
                                GeeksforGeeks 
                            </a> 
                            <span class="navbar-burger" 
                                data-target="navbarMenuHeroC"> 
                                <span></span> 
                                <span></span> 
                                <span></span> 
                            </span> 
                        </div> 
                        <div id="navbarMenuHeroC" class="navbar-menu"> 
                            <div class="navbar-end"> 
                                <a class="navbar-item is-active"> 
                                    Home 
                                </a> 
                                <a class="navbar-item"> 
                                    Practice 
                                </a> 
                                <a class="navbar-item"> 
                                    DSA 
                                </a> 
                                <a class="navbar-item"> 
                                    About Us 
                                </a> 
                            </div> 
                        </div> 
                    </div> 
                </header> 
            </div> 
              
            <!-- Hero content -->
            <div class="hero-body"> 
                <div class="container has-text-centered"> 
                    <p class="title"> 
                        Content 
                    </p> 
  
                </div> 
            </div> 
        </section> 
    </center> 
</body> 
  
</html> 

Output:

Example 2: In the below code, we will use the hero variable to style the web page.

SCSS Code (style.scss):

$hero-colors: lightgreen;
section{
    background-color: $hero-colors;
}

CSS Code after compiling SCSS code(style.css):

section{
   background-color: lightgreen;
}

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= 
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> 
    <link rel="stylesheet" href="style.css"> 
</head> 
  
<body> 
    <center> 
        <section> 
            <div> 
                <h1>GeeksforGeeks</h1> 
                <h2>A computer science portal for geeks</h2> 
            </div> 
        </section> 
    </center> 
</body> 
  
</html> 