Bootstrap Notify v3.1.5

The new White 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">
   <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
       <i class="tim-icons icon-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" data-dismiss="alert" aria-label="Close">
       <i class="tim-icons icon-simple-remove"></i>
   </button>
   <span data-notify="icon" class="tim-icons icon-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" data-dismiss="alert" aria-label="Close">
       <i class="tim-icons icon-simple-remove"></i>
   </button>
   <span data-notify="icon" class="tim-icons icon-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" data-dismiss="alert" aria-label="Close">
        <i class="tim-icons icon-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" data-dismiss="alert" aria-label="Close">
        <i class="tim-icons icon-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" data-dismiss="alert" aria-label="Close">
        <i class="tim-icons icon-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" data-dismiss="alert" aria-label="Close">
        <i class="tim-icons icon-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" data-dismiss="alert" aria-label="Close">
        <i class="tim-icons icon-simple-remove"></i>
    </button>
    <span><b> Danger - </b> This is a regular notification made with ".alert-danger"</span>
</div>

<!-- javascript for init -->
type = ['','info','success','warning','danger'];

function showNotification(from, align){
  color = Math.floor((Math.random() * 4) + 1);

  $.notify({
      icon: "tim-icons icon-bell-55",
      message: "Welcome to <b>White Dashboard Pro</b> - a beautiful freebie for every web developer."

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