Open In App

Bulma Notification Colors

Improve
Improve
Like Article
Like
Save
Share
Report

Bulma is a free, 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 notification is a simple colored block that draws the attention of the user to something. It can be used as a pinned notification in the corner of the viewport. It supports the use of the delete element.

Bulma Notification Colors Class: 

  • is-primary: This class is used to set the color of the notification element to light cyan.
  • is-dark: This class is used to set the color of the notification element to dark brown.
  • is-link: This class is used to set the color of the notification element to blue.
  • is-info: This class is used to set the color of the notification element to light blue.
  • is-success: This class is used to set the color of the notification element to green.
  • is-warning: This class is used to set the color of the notification element to yellow.
  • is-danger: This class is used to set the color of the notification element to red.

Syntax:

<div class="notification Notification-Colors-Class">
  ...
</div>

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Notification Colors</title>
  
    <!-- Include Bulma CSS -->
    <link rel='stylesheet'
          href=
  
    <!-- FontAwesome Library -->
    <script src=
    </script>
</head>
  
<body>
    <div class='content container has-text-justified'>
        <div class='columns is-mobile is-centered'>
            <div class='column is-8'>
                <h1 class="has-text-success 
                    has-text-centered">
                    GeeksforGeeks
                </h1>
  
                <h3 class="has-text-centered">
                    Bulma Notification Colors
                </h3>
  
                <div class="notification is-primary">
                    <button class="delete"></button>
                    <strong>Primary Notification Color: </strong>
                    <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>
  
                <div class="notification is-dark">
                    <button class="delete"></button>
                    <strong>Dark Notification Color: </strong>
                    <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>
  
                <div class="notification is-link">
                    <button class="delete"></button>
                    <strong>Link Notification Color: </strong>
                    <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>
  
                <div class="notification is-info">
                    <button class="delete"></button>
                    <strong>Info Notification Color: </strong>
                    <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>
  
                <div class="notification is-success">
                    <button class="delete"></button>
                    <strong>Success Notification Color: </strong>
                    <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>
  
                <div class="notification is-warning">
                    <button class="delete"></button>
                    <strong>Warning Notification Color: </strong>
                    <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>
  
                <div class="notification is-danger">
                    <button class="delete"></button>
                    <strong>Danger Notification Color: </strong>
                    <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>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Bulma Notification Colors

Reference: https://bulma.io/documentation/elements/notification/#colors



Last Updated : 30 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads