Skip to content
Related Articles

Related Articles

Bulma Notification Variables

View Discussion
Improve Article
Save Article
  • Last Updated : 03 Aug, 2022
View Discussion
Improve Article
Save Article

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">
      
    <!-- font-awesome cdn -->
    <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">
      
    <!--font-awesome cdn -->
    <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/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!