Animated Notification Plugin For jQuery and Bootstrap - Bootstrap Growl

Yet another jQuery notification plugin that makes use of Boostrap's alerts to create animated informative messages in your web/app page, similar to the Mac OS X's 'Growl' notification system.

See also:

• Tiny jQuery Plugin For Informative Messages In The Browser - Growler
• Cool Animated Notification Plugin with jQuery - jGrowl

Basic Usage:

1. Include jQuery javascript library together with Twitter Bootstrap's files in the page.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script> 

2. Include jQuery Bootstrap Growl plugin after jQuery library.

<script src="jquery.bootstrap-growl.js"></script> 

3. Create the notification messages in the javascript.

$.bootstrapGrowl("Your Messages", // Messages
{ // options
type: "info", // info, success, warning and danger
ele: "body", // parent container
offset: {
from: "top",
amount: 20
},
align: "right", // right, left or center
width: 250,
delay: 4000,
allow_dismiss: true, // add a close button to the message
stackup_spacing: 10
});

Change logs:

2016-12-27

• JS update

2014-12-11

• Bootstrap 3.x compatibility
• add class "alert-dismissible" when allow_dismis = true and change close button pattern

---

This awesome jQuery plugin is developed by ifightcrime. For more Advanced Usages, please check the demo page or visit the official website.