Bulma Footer Variables
Last Updated :
15 Jun, 2022
Bulma is a free and open-source framework based on flexbox property used to build reusable components while building web applications. This framework is a mobile-ready framework with which the users can see the web applications like a mobile application.
Bulma Footer Variables are the SCSS variables that are compiled to CSS, which in turn, are utilized to add styling in various customization options. These variables are declared once to store data that can be reused whenever required. In case the variables are modified once then the changes will be reflected wherever the variable is utilized. For instance, the footer background color in Bulma can be used to set the background color for the footer. Similarly, the footer text color can be set with the help of the footer-color variable in Bulma.
Bulma Footer Variables:
- $footer-background-color: This variable is used to define the background color for the footer.
- $footer-color: This variable is used to define the text color for the footer.
- $footer-padding: This variable is used to define the footer size, along with space around the footer by specifying the padding value.
Syntax:
$variable-name: value of the variable;
Example 1: In the below example, we will be utilizing the variables to change the style of the footer.
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="gfg.css">
<title>Bulma Footer Variable</title>
</head>
<body>
<center>
<h1 style="font-size: 40px;
color:green; ">
GeeksforGeeks
</h1>
<br>
<footer class="footer">
<div class="content has-text-centered">
<p>
<strong style="color: green ;">
GeeksforGeeks
</strong> by
<a href=
Sandeep jain
</a>.
GeeksforGeeks is a computer science portal for geeks.
</p>
</div>
</footer>
</center>
</body>
</html>
|
SCSS file: Before creating the SCSS file keep in mind that the name of the SCSS file and CSS file should be the same. Below code is written in gfg.scss file and don’t write anything in the CSS file.
$footer-background-color: lightgreen;
$footer-color: false;
$footer-padding: 3rem 1.5rem 6rem;
.footer{
background-color: $footer-background-color ;
color: $footer-color;
padding: $footer-padding;
}
gfg.css:
.footer {
background-color: lightgreen;
color: false;
padding: 3rem 1.5rem 6rem;
}
Output:
Example 2: This example describes the Bulma Footer Variable by specifying the variable for the background color, text color & padding value.
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="gfg.css">
<title>Bulma Footer Variable</title>
</head>
<body>
<center>
<h1 style="font-size: 40px;
color:green; ">
GeeksforGeeks
</h1>
<br>
<footer class="footer">
<div class="content has-text-centered">
<p>
<strong style="color: green ;">
GeeksforGeeks
</strong> by
<a href="#">Sandeep jain</a>.
GeeksforGeeks is a computer science
portal for geeks.
</p>
</div>
</footer>
</center>
</body>
</html>
|
SCSS file:
$footer-background-color: rgb(150, 161, 139);
$footer-color: rgb(10, 10, 10);
$footer-padding: 10px;
.footer{
background-color: $footer-background-color ;
color: $footer-color;
padding: $footer-padding;
}
gfg.css:
.footer {
background-color: #96a18b;
color: #0a0a0a;
padding: 10px;
}
Output:
Reference: https://bulma.io/documentation/layout/footer/#variables
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...