Bulma | Notification

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 about something. It can be used as a pinned notification in the corner of the viewport. It supports the use of the delete element.

Example 1: This example using Bulma to create a simple notification box.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  <title>Bulma Notification</title>
  <link rel='stylesheet' href=
  
  <!-- custom css -->
  <style>
    div.columns {
      margin-top: 70px;
    }
  
    h1 {
      color: green !important
    }
  
    p {
      font-size: 20px;
    }
  
    button {
      float: right
    }
  </style>
</head>
  
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-6'>
        <div class='notification'>
          <h1 class='title'>
            Geek for Geeks
            <button class="delete"></button>
          </h1>
  
          <p class='is-family-monospace'>
            'GeeksforGeeks' 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.
          </p>
        </div>
      </div>
    </div>
  </div>
</body>
  
</html>

chevron_right


Output:

Example 2: This example creating a notification block with colors using Bulma.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  <title>Bulma Notification</title>
  <link rel='stylesheet' href=
  
  <!-- custom css -->
  <style>
    div.columns {
      margin-top: 70px;
    }
  
    h1 {
      color: green !important
    }
  
    p {
      font-size: 20px;
    }
  
    button {
      float: right
    }
  </style>
</head>
  
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-5'>
        <div class='notification is-primary'>
          <h1 class='title'>
            Geek for Geeks
            <button class="delete"></button>
          </h1>
  
          <p class='is-family-monospace'>
            'GeeksforGeeks' 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.
          </p>
        </div>
      </div>
  
      <div class='column is-5'>
        <div class='notification is-link'>
          <h1 class='title'>
            Geek for Geeks
            <button class="delete"></button>
          </h1>
  
          <p class='is-family-monospace'>
            'GeeksforGeeks' 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.
          </p>
        </div>
      </div>
    </div>
  </div>
</body>
  
</html>

chevron_right




Example 3: This example creating a notification block with colors using Bulma.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  <title>Bulma Notification</title>
  <link rel='stylesheet' href=
  
  <!-- custom css -->
  <style>
    div.columns {
      margin-top: 70px;
    }
  
    h1 {
      color: green !important
    }
  
    p {
      font-size: 20px;
    }
  
    button {
      float: right
    }
  </style>
</head>
  
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-5'>
        <div class='notification is-info'>
          <h1 class='title'>
            Geek for Geeks
            <button class="delete"></button>
          </h1>
  
          <p class='is-family-monospace'>
            'GeeksforGeeks' 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.
          </p>
        </div>
      </div>
  
      <div class='column is-5'>
        <div class='notification is-success'>
          <h1 class='title'>
            Geek for Geeks
            <button class="delete"></button>
          </h1>
  
          <p class='is-family-monospace'>
            'GeeksforGeeks' 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.
          </p>
        </div>
      </div>
    </div>
  </div>
</body>
  
</html>

chevron_right


Output:

Example 4: This example creating a notification block with colors using Bulma.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  <title>Bulma Notification</title>
  <link rel='stylesheet' href=
  
  <!-- custom css -->
  <style>
    div.columns {
      margin-top: 70px;
    }
  
    h1 {
      color: green !important
    }
  
    p {
      font-size: 20px;
    }
  
    button {
      float: right
    }
  </style>
</head>
  
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-5'>
        <div class='notification is-warning'>
          <h1 class='title'>
            Geek for Geeks
            <button class="delete"></button>
          </h1>
  
          <p class='is-family-monospace'>
            'GeeksforGeeks' 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.
          </p>
        </div>
      </div>
  
      <div class='column is-5'>
        <div class='notification is-danger'>
          <h1 class='title'>
            Geek for Geeks
            <button class="delete"></button>
          </h1>
  
          <p class='is-family-monospace'>
            'GeeksforGeeks' 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.
          </p>
        </div>
      </div>
    </div>
  </div>
</body>
  
</html>

chevron_right


Output:

Example 5: This example creating a text messages interface (using class ‘notification’).

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  <title>Bulma Notification</title>
  <link rel='stylesheet' href=
  
  <!-- custom css -->
  <style>
    div.columns {
      margin-top: 10px;
    }
  
    p {
      font-size: 20px;
    }
  
    div.sender {
      float: left
    }
  
    div.receiver {
      float: right
    }
  
    div.notification {
      padding: 8px
    }
  
    .table td {
      border: none;
      padding: 0.4em
    }
  </style>
</head>
  
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-6'>
        <table class='table is-fullwidth'>
          <tr>
            <td>
              <div class='sender notification is-success'>
                <p>Hi, How are you?</p>
              </div>
            </td>
          </tr>
  
          <tr>
            <td>
              <div class='receiver notification is-white'>
                <p>I'm good, how are you?</p>
              </div>
            </td>
          </tr>
  
          <tr>
            <td>
              <div class='sender notification is-success'>
                <p>well, me too!!</p>
              </div>
            </td>
          </tr>
  
          <tr>
            <td>
              <div class='sender notification is-success'>
                <p>How, your study going on?</p>
              </div>
            </td>
          </tr>
  
          <tr>
            <td>
              <div class='receiver notification is-white'>
                <p>Its quite well!!</p>
              </div>
            </td>
          </tr>
  
          <tr>
            <td>
              <div class='receiver notification is-white'>
                <p>
                  well, i guess you started 
                  to learn javascript
                </p>
              </div>
            </td>
          </tr>
  
          <tr>
            <td>
              <div class='receiver notification is-white'>
                <p>is it going on?</p>
              </div>
            </td>
          </tr>
  
          <tr>
            <td>
              <div class='sender notification is-success'>
                <p>Yeah!! its going on!!</p>
              </div>
            </td>
          </tr>
  
          <tr>
            <td>
              <div class='sender notification is-success'>
                <p>infact i do some projects too!!</p>
              </div>
            </td>
          </tr>
  
          <tr>
            <td>
              <div class='receiver notification is-white'>
                <p>wooo!! thats realy cool!</p>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</body>
  
</html>

chevron_right


Output:

Note: Here in all the above examples, we use some extra Bulma classes like container, column, table, etc. to design the content well.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.