Minimal Notification Bar Plugin For jQuery and Bootstrap 3 - bootbar

File Size: 83.8 KB
Views Total: 8667
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimal Notification Bar Plugin For jQuery and Bootstrap 3 - bootbar

Bootbar is a lightweight and easy to use jQuery plugin styled with Bootstrap 3 that creates various types of stacked notification bars with simple slide away animations.

See also:

How to use it:

1. Include the Twitter's bootstrap 3 framework in the page.

<link rel="stylesheet" href="">
<script src=""></script>

2. Include the jQuery bootbar plugin after jQuery javascript library.

<script src=""></script>
<script src="bootbar.js"></script>

3. Create notifications in the javascript.

$"This is a standard info bar.");
$.bootbar.warning("This warning is stacked underneath the original info bar.");
$.bootbar.danger("This is a standard danger bar.");
$.bootbar.success("This is a standard success bar.");

4. The sample CSS to place the notification bars.

.alert-messages {
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    z-index: 10000000;

5. Available options and callback functions.

$"This <a href=\"#\">info bar<\/a>.", {
autoDismiss: false,      // Don't automatically dismiss the bar.
autoLinkClass: true,     // onDraw callback
barType: alertTypes[0],  // info
dismissTimeout: 3000,    // 3 Seconds
dismissEffect: "slide",  // Slide away: (slide, fade)
dismissSpeed: "fast",    // Dismiss speed: (slow, fast)
onDraw: null,            // onDraw callback
onDismiss: null          // onDismiss callback

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