Bulma | Notification - GeeksforGeeks

27 Sep, 2021
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.  
HTML
<!DOCTYPE html><html> <head>  <title>Bulma Notification</title>  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>   <!-- 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>
Output: 
Example 2: This example creating a notification block with colors using Bulma. 
HTML
<!DOCTYPE html><html> <head>  <title>Bulma Notification</title>  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>   <!-- 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>
Example 3: This example creating a notification block with colors using Bulma.
HTML
<!DOCTYPE html><html> <head>  <title>Bulma Notification</title>  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>   <!-- 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>
Output: 
Example 4: This example creating a notification block with colors using Bulma.
HTML
<!DOCTYPE html><html> <head>  <title>Bulma Notification</title>  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>   <!-- 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>
Output: 
Example 5: This example creating a text messages interface (using class ‘notification’). 
HTML
<!DOCTYPE html><html> <head>  <title>Bulma Notification</title>  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>   <!-- 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 really cool!</p>               </div>            </td>          </tr>        </table>      </div>    </div>  </div></body> </html>
Output: 
Note: Here in all the above examples, we use some extra Bulma classes like container, column, table, etc. to design the content well. 
kashishsoda
Bulma
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills