Bulma Section Variables
Last Updated :
10 Oct, 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.
Section Variable?
It is used to style sections using section variables. One webpage is divided into several sections and we will style those sections to enhance the UI of the website.
Syntax:
$variable-name: value of the variable;
Approach:
- Firstly, create an HTML file and include Bulma CSS.
- In the next step, we will create two files with the same name with different extensions.
- In the last step, compile SCSS file using CSS compiler
Variable Used:
| Name |
Type |
Value |
| $section-padding |
size |
3rem 1.5rem |
| $section-padding-desktop |
size |
3rem 3rem |
| $section-padding-medium |
size |
9rem 4.5rem |
| $section-padding-large |
size |
18rem 6rem |
Example 1: In the below code, we will see how to style a section using the section variable.
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="k/gfg.css">
</head>
<body>
<center>
<h1 style="font-size: 40px; color:green; ">
GeeksforGeeks</h1><br>
<section class="section is-large">
<h1 class="title">Section | bulma</h1>
<h2 class="subtitle">
This is a section. A section is a
small part of website.
</h2>
</section>
</center>
</body>
</html>
|
SCSS Code:
$section-padding: 3rem 1.5rem;
.section{
padding: $section-padding;
}
Output:
Example 2: In the below code, we will see how to style a section using the section variable.
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="k/gfg.css">
</head>
<body>
<center>
<h1 style="font-size: 40px; color:green; ">
GeeksforGeeks</h1><br>
<section class="section is-large">
<h1 class="title">Section | bulma</h1>
<h3 class="title">Padding Desktop</h3>
<h2 class="subtitle">
This is a section. A section is a
small part of website.
</h2>
</section>
</center>
</body>
</html>
|
SCSS Code:
$section-padding-desktop: 3rem 3rem;
.section{
padding: $section-padding-desktop;
}
Output:
Reference: https://bulma.io/documentation/layout/section/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...