Bulma Container Variables
Last Updated :
01 Aug, 2022
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.
The container is the element used to center the content horizontally on the bigger screen sizes. Mainly, it is used as the child of the following navbar, hero, section, and footer.
When we have larger viewports then we need to center the elements then we can use the container classes to do this. There are some container classes available as shown below.
Classes Used:
- .container: It has full width in screens with size less than 1024px.
- .container.is-widescreen: It has full width in screen with size less than 1215px.
- .container.is-fullhd: It has full width in screen below 1407px.
- .container.is-max-desktop: It has full width only in screen less than 1024px and after that width will be 960px
- .container.is-max-widescreen: It has full width in screen below 1024px and 960px when screen type is desktop and after that 1152px.
Syntax:
<div class="container <container-class>">
...
</div>
Syntax of the variable:
$property-name: property-value;
Variable Used:
| Name |
Description |
Type |
Value |
Computed Value |
Computed Type |
| $container-offset |
This variable is used to define the offset of the container. |
compound |
(2 * $gap) |
|
|
| $container-max-width |
This variable is used to define the max-width of the container. |
variable |
$fullhd |
1344px + (2 * $gap) |
computed |
Example 1: In the below code, we will make use of the above variable to demonstrate the use of the container variable.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Container Variable</title>
<link rel='stylesheet' href=
<script src=
</script>
<link rel="stylesheet" href="style.css">
<style>
.title{
color:green;
}
</style>
</head>
<body>
<h1 class="title has-text-centered">
GeekforGeeks
</h1>
<h3 class="subtitle has-text-centered">
A computer science portal for geeks.
</h3><br>
<div class="container">
<div style="background-color:green; height:200px;">
<p style="color:white;size:30;">
The size of the container is 1000px
</p>
<h3 style="color:white;size:30;">
GeeksforGeeks
</h3>
</div>
</div>
</body>
</html>
|
SCSS Code:
$container-max-width: 1000px;
.container{
max-width:$container-max-width;
}
Compiled CSS Code:
.container {
max-width: 1000px;
}
Output:
Example 2: In the below code, we will make use of the above variable to demonstrate the use of the container variable.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Container Variable</title>
<link rel='stylesheet' href=
<script src=
</script>
<link rel="stylesheet" href="style.css">
<style>
.title{
color:green;
}
</style>
</head>
<body>
<h1 class="title has-text-centered">
GeekforGeeks
</h1>
<h3 class="subtitle has-text-centered">
A computer science portal for geeks.
</h3><br>
<div class="container">
<div style="background-color:green;height:200px;">
<p style="color:white;size:30;">
The size of the container is 100%.
</p>
<h3 style="color:white;size:30;">
GeeksforGeeks
</h3>
</div>
</div>
</body>
</html>
|
SCSS Code:
$container-max-width: 100%;
.container{
max-width:$container-max-width;
}
Compiled CSS Code:
.container {
max-width: 100%;
}
Output:
Reference: https://bulma.io/documentation/layout/container/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...