Bootstrap Notify v3.1.5

The new Now UI Dashboard Pro notifications are looking fresh and clean. They go great with the navbar.

If you want to use add special animations for them, we integrated a third party plugin called Bootstrap Notify. Out friend Robert McIntosh did a wonderful job. If you want to see a coded example, you can see it below.

For more information please check Full Documentation

Notifications Style

This is a plain notification

This is a notification with close button.

This is a notification with close button and icon.

This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.

<div class="alert alert-info">
    <span>This is a plain notification</span>
</div>
<div class="alert alert-info alert-dismissible fade show">
    <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
        <i class="nc-icon nc-simple-remove"></i>
    </button>
    <span>This is a notification with close button.</span>
</div>
<div class="alert alert-info alert-with-icon alert-dismissible fade show" data-notify="container">
    <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
        <i class="nc-icon nc-simple-remove"></i>
    </button>
    <span data-notify="icon" class="nc-icon nc-bell-55"></span>
    <span data-notify="message">This is a notification with close button and icon.</span>
</div>
<div class="alert alert-info alert-with-icon alert-dismissible fade show" data-notify="container">
    <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
        <i class="nc-icon nc-simple-remove"></i>
    </button>
    <span data-notify="icon" class="nc-icon nc-chart-pie-36"></span>
    <span data-notify="message">This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.</span>
</div>

Notifications States

Primary - This is a regular notification made with ".alert-primary"

Info - This is a regular notification made with ".alert-info"

Success - This is a regular notification made with ".alert-success"

Warning - This is a regular notification made with ".alert-warning"

Danger - This is a regular notification made with ".alert-danger"

<div class="alert alert-primary alert-dismissible fade show">
    <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
        <i class="nc-icon nc-simple-remove"></i>
    </button>
    <span><b> Primary - </b> This is a regular notification made with ".alert-primary"</span>
</div>

<div class="alert alert-info alert-dismissible fade show">
    <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
        <i class="nc-icon nc-simple-remove"></i>
    </button>
    <span><b> Info - </b> This is a regular notification made with ".alert-info"</span>
</div>
<div class="alert alert-success alert-dismissible fade show">
    <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
        <i class="nc-icon nc-simple-remove"></i>
    </button>
    <span><b> Success - </b> This is a regular notification made with ".alert-success"</span>
</div>
<div class="alert alert-warning alert-dismissible fade show">
    <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
        <i class="nc-icon nc-simple-remove"></i>
    </button>
    <span><b> Warning - </b> This is a regular notification made with ".alert-warning"</span>
</div>
<div class="alert alert-danger alert-dismissible fade show">
    <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
        <i class="nc-icon nc-simple-remove"></i>
    </button>
    <span><b> Danger - </b> This is a regular notification made with ".alert-danger"</span>
</div>

<!-- javascript for init -->
function showNotification(from, align){
    color = 'primary';

    $.notify({
        icon: "now-ui-icons ui-1_bell-53",
        message: "Welcome to <b>Now Ui Dashboard Pro</b> - a beautiful freebie for every web developer."

      },{
          type: color,
          timer: 8000,
          placement: {
              from: from,
              align: align
          }
      });
}