Bulma - Notification

The Bulma - notification blocks are used to alert users for something. Basically, it can be seen as a pinned notification in the corner of the viewport.

Steps To Create Bulma Notification

To create a Bulma notification element, follow the following given below steps.

Step 1: Add .notification class to the notification container base class.
Step 2: Add .delete class to the <button> element base class that will exist inside the notification container.

Example

sudhakarinfotech is providing web development tutorial for beginner and professional. sudhakarinfotech is providing software development tutorial.To know more click here.

General Syntax

      
        <div class="notification">
    <button class="delete"></button>
    <p>......</p>
</div>

Try it now

Source Code

          
            <div class="container">
	<div class="notification">
	  <button class="delete"></button>
	  Sudhakarinfotech is an online web development learning platform for professionals & beginners. You can learn different programming languages.
	</div>
</div>

Try it now

Source Code : Output

Sudhakarinfotech is an online web development learning platform for professionals & beginners. You can learn different programming languages.

Bulma CSS Colored Notification

To create, colored notification block, use is-primary,is-link,is-info,is-success,is-warning,is-danger.

Example

sudhakarinfotech provides object oriented tutorials . You can learn object oriented Javascript as well as object oriented PHP step by step.

General Syntax

      
        <div class="notification is-{primary | is-link | is-info | is-success | is-warning | is-danger}">
  <button class="delete"></button>
</div>

Try it now

Source Code

          
            <div class="notification is-primary is-light">
  <button class="delete"></button>
   <strong>sudhakarinfotech</strong> provides object oriented tutorials also.You can learn object oriented javascript as well as object oriented PHP.
</div>

Try it now

Source Code : Output

sudhakarinfotech provides object oriented tutorials also.You can learn object oriented javascript as well as object oriented PHP.

Bulma CSS Light Notification Color

Each background color has its own light version. Simply, append the .is-light modifier to obtain the light version of the notification.

General Syntax

      
        <div class="notification is-{primary | is-link | is-info | is-success | is-warning | is-danger} is-light">
  <button class="delete"></button>
</div>

Try it now

Source Code

          
            <div class="notification is-primary is-light">
  <button class="delete"></button>
 Learn & understand the Bulma light notification concept with the help of an examples.
</div>

Try it now

Source Code : Output

Learn & understand the Bulma light notification concept with the help of an examples.

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4