Bulma Box Variables
Last Updated :
26 Jul, 2022
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">
<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">
<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/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...