Bootstrap Notify v3.1.5

The new Paper Dashboard 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">
    <button type="button" aria-hidden="true" class="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" data-notify="container">
    <button type="button" aria-hidden="true" class="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" data-notify="container">
    <button type="button" aria-hidden="true" class="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 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">
    <button type="button" aria-hidden="true" class="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">
    <button type="button" aria-hidden="true" class="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">
    <button type="button" aria-hidden="true" class="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">
    <button type="button" aria-hidden="true" class="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">
    <button type="button" aria-hidden="true" class="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: "nc-icon nc-bell-55",
        message: "Welcome to <b>Paper Dashboard</b> - a beautiful freebie for every web developer."

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