Bulma Notification Variables
Last Updated :
03 Aug, 2022
Bulma is a free and open-source framework based on flexbox property used to build reusable components while building web applications. This framework is a mobile-ready framework with which the users can see the web applications like a mobile application.
Bulma Notification is a simple SCSS variable that is compiled to CSS, which is in turn, utilized to highlight the notifications by adding to the specific style in various customization options. These variables are declared once to store data that can be reused whenever required. In case the variables are modified once then the changes will be reflected wherever the variable is utilized. Basically, it is used as a pinned notification in the corner of the viewport.
Bulma Notification Variable Class:
- notification: This class can be used to represent an instance of giving notice or information by highlighting it.
Syntax:
$notification-porpertyName: variable-value;
Bulma Notification Variables:
| Name |
Description |
Type |
Value |
Computed Value |
Computed Type |
|
$notification-background-color
|
This variable is used to provide background-color to the notification
|
variable
|
$background
|
hsl(0, 0%, 96%)
|
color
|
|
$notification-code-background-color
|
This variable is used to provide background color to the code of notification.
|
variable
|
$scheme-main
|
hsl(0, 0%, 100%)
|
color
|
|
$notification-radius
|
This variable is used to provide a radius to the notification.
|
variable
|
$radius
|
4px
|
size
|
|
$notification-padding
|
This variable is used to define padding to the notification.
|
size
|
1.25rem 2.5rem 1.25rem 1.5rem
|
|
|
|
$notification-padding-ltr
|
This variable is used to define padding to the notification from the left side.
|
size
|
1.25rem 2.5rem 1.25rem 1.5rem
|
|
|
|
$notification-padding-rtl
|
This variable is used to define padding to the notification from the right side.
|
size
|
1.25rem 1.5rem 1.25rem 2.5rem
|
|
|
|
$notification-colors
|
This variable is used to define the color of the notification.
|
variable.
|
$colors
|
Bulma colors
|
map
|
Example 1: In the below code example, we will make use of the Bulma Notification variable to add the background-color to the notification.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>Bulma Notification Variables</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">
Bulma Notification Variables
</h3>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-6'>
<div class='notification'>
<h1 class='title'>
GeekforGeeks
<button class="delete"></button>
</h1>
<p class='is-family-monospace'>
'GeeksforGeeks' is a computer
science portal.
</p>
</div>
</div>
</div>
</div>
</center>
</body>
</html>
|
SCSS Code:
$notification-background-color:lightgreen;
.notification{
background-color:$notification-background-color;
}
Compiled CSS Code(style.css):
.notification {
background-color: lightgreen; }
Output:
Example 2: In the below code example, we will make use of the Bulma Notification variable to add the text color & padding to the notification.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>Bulma Notification Variables</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">
Bulma Notification Variables
</h3>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-6'>
<div class='notification'>
<p class='is-family-monospace'>
Welcome to GeeksforGeeks
</p>
</div>
</div>
</div>
</div>
</center>
</body>
</html>
|
SCSS Code:
$notification-colors:grey;
$notification-padding: 2px;
.notification {
color:$notification-colors;
padding:$notification-padding;
}
Compiled CSS Code(style.css):
.notification {
color: grey;
padding: 2px;
}
Output:
Reference: https://bulma.io/documentation/elements/notification/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...