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.
<!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">
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</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.
<!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">
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</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/