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 Message component in Bulma provides colored box-type placeholders to emphasize certain parts of the page. It includes several other components that can be added to design the content.
Variable Used:
| Variable-Name | Description | Type | Value | Computed Value | Computed Type |
|---|---|---|---|---|---|
| $message-background-color | This variable is used to define the background color of the message. | variable | $background | hsl(0, 0%, 96%) | color |
| $message-radius | This variable is used to define the radius of the radius. | variable | $radius | 4px | size |
| $message-header-background-color | This variable is used to define the background color of the message. | variable | $text | hsl(0, 0%, 29%) | color |
| $message-header-color | This variable is used to define the color of the header. | variable | $text-invert | #fff | color |
| $message-header-weight | This variable is used to define the weight of the header. | variable | $weight-bold | 700 | font-weight |
| $message-header-padding | This variable is used to define the padding to the header. | size | 0.75em 1em | ||
| $message-header-radius | This variable is used to define the radius of the header. | variable | $radius | 4px | size |
| $message-body-border-color | This variable is used to define the border color of the message. | variable | $border | hsl(0, 0%, 86%) | color |
| $message-body-border-width | This variable is used to define the width of the border of the message. | size | 0 0 0 4px | ||
| $message-body-color | This variable is used to define the color of the message. | variable | $text | hsl(0, 0%, 29%) | color |
| $message-body-padding | This variable is used to define the padding of the message. | size | 1.25em 1.5em | ||
| $message-body-radius | This variable is used to define the radius of the message. | variable | $radius | 4px | size |
| $message-body-pre-background-color | This variable is used to define the background color of the pre-message. | variable | $scheme-main | hsl(0, 0%, 100%) | color |
| $message-body-pre-code-background-color | This variable is used to define the background color of the body. | string | transparent | ||
| $message-header-body-border-width | This variable is used to define the width of the header body. | string | 0 | ||
| $message-colors | This variable is used to define the color of the message. | variable | $colors | Bulma colors | map |
Example 1: In the below code, we will make use of the above variable to modify the message.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<link rel="stylesheet" href="style.css">
<title>Bulma message variable</title>
<!-- 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" style="color:green;" >
GeeksforGeeks
</h1>
<h3 class="subtitle">
A computer science portal for geeks
</h3>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-4'>
<article class="message is-primary">
<div class="message-header">
<p>GeeksforGeeks</p>
<button class="delete" aria-label="delete">
</button>
</div>
<div class="message-body">
<strong>'GeeksforGeeks'</strong> is a
computer science portal.it was created
with a goal in mind to provide well
written, well thought and well explained
solutions for selected questions. The
core team of five super geeks
constituting of technology lovers and
computer science enthusiasts have been
constantly working in this direction.
</div>
</article>
</div>
</div>
</div>
</center>
</body>
</html>
SCSS Code:
$message-background-color:lightgreen;
.message-body{
background-color:$message-background-color;
}
Compiled CSS Code:
.message-body {
background-color: lightgreen; }
Output:
Example 2: In the below code, we will make use of the above variable to modify the message.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<link rel="stylesheet" href="style.css">
<title>Bulma message variable</title>
<!-- 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" style="color:green;" >
GeeksforGeeks
</h1>
<h3 class="subtitle">
A computer science portal for geeks
</h3>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-4'>
<article class="message is-primary">
<div class="message-header">
<p>GeeksforGeeks</p>
<button class="delete" aria-label="delete">
</button>
</div>
<div class="message-body">
<strong>'GeeksforGeeks'</strong> is a
computer science portal.it was created
with a goal in mind to provide well
written, well thought and well explained
solutions for selected questions. The
core team of five super geeks
constituting of technology lovers and
computer science enthusiasts have been
constantly working in this direction.
</div>
</article>
</div>
</div>
</div>
</center>
</body>
</html>
SCSS Code:
$message-header-weight:20px;
.message-body
{
font-size:$message-header-weight;
}
Compiled CSS Code:
.message-body
{
font-size: 20px;
}
Output:
Reference: https://bulma.io/documentation/components/message/#variables
