Bootstrap Notify

This plugin helps to turn standard bootstrap alerts into "growl" like notifications.

Header Image Displaying Bootstrap Notify messages

Bootstrap Notify formally known as Bootstrap notify was renamed at version 3.0.0. This project originally started out to be a pull request for ifightcrime's Bootstrap notify plugin, but quickly grew into it's own. This is the reason the two plugins shared a name and I chose that it was time that my plugin got its own name.

Please keep in mind that with this new version of Bootstrap Notify formally known as Bootstrap Growl that you will not be able to just drop it into your project and go. When ever I do a big update such as going from version 2.x to 3.x that it is a complete rewrite with new features and better support. This means you will have to review your project before updating this project. Another important update is since version 3.x you no longer call the plugin using $.growl(...) you must use $.notify(...).

Demo

Documentation

Please make sure to read the documenation it exlains how to use this plugin and points out common mistakes people tend to make. It will also give you examples on how to use this plugin.

If you are having any issues using this plugin please feel free to ask me on gitter. I must admit it is a wonderful site for quick questions about github plugins that may not actually be issues. Please feel free to make improvements by forking the plugin and making a pull request. Lastly, if you do find an issue with the plugin please report it on the github issues page.

Custom CSS Not Included

Yes, my plugin relies on custom css for its intro and exit animations. For this I recommend using this wonderful resource called Animate.css by Daniel Eden. He has put together a wonderful set of css animations that work perfectly with this plugin.

The most important one is probably going to be the progress bar. You will have to include that css if you would like the progress bars to look like the ones displayed on this page.

[data-notify="progressbar"] { margin-bottom: 0px; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 5px; }

Do not do the following

This is wrong when using this plugin. I have tried to make Bootstrap Notify as flexible I could think by including both options and settings.

$('body').notify({ message: 'Hello World', type: 'danger' });

Instead do this

Below is an example showing all the correct way to use Bootstrap Notify.

$.notify({ // options message: 'Hello World' },{ // settings type: 'danger' });

Full list of options/settings

Below is a list of all the options and settings you are able to use and which each section belongs to.

$.notify({ // options icon: 'glyphicon glyphicon-warning-sign', title: 'Bootstrap notify', message: 'Turning standard Bootstrap alerts into "notify" like notifications', url: 'https://github.com/mouse0270/bootstrap-notify', target: '_blank' },{ // settings element: 'body', position: null, type: "info", allow_dismiss: true, newest_on_top: false, placement: { from: "top", align: "right" }, offset: 20, spacing: 10, z_index: 1031, delay: 5000, timer: 1000, url_target: '_blank', mouse_over: null, animate: { enter: 'animated fadeInDown', exit: 'animated fadeOutUp' }, onShow: null, onShown: null, onClose: null, onClosed: null, icon_type: 'class', template: '<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0}" role="alert">' + '<button type="button" aria-hidden="true" class="close" data-notify="dismiss">×</button>' + '<span data-notify="icon"></span> ' + '<span data-notify="title">{1}</span> ' + '<span data-notify="message">{2}</span>' + '<div class="progress" data-notify="progressbar">' + '<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' + '</div>' + '<a href="{3}" target="{4}" data-notify="url"></a>' + '</div>' });

Options

Name Type / Values Required Description
icon class | src No This is the icon that will be displayed within the notify notification. This icon can either be a class (Font Icon) or an image url. Please keep in mind if you wish to use an image url that you must set icon_type to img in the options.
title string No This is the title that will be displayed within the notify notification. Please keep in mind unless you style the [data-notify="title"] in css this will look identical to the message.
message string Yes This is the message that will be displayed within the notify notification.
url web address No If this value is set it will make the entire notify (except the close button) a clickable area. If the user clicks on this area it will take them to the url specified here.
target _blank | _self | _parent | _top no The target attribute specifies where to open the linked notification.

Settings

Name Type / Values Default Description
element string body Appends the notification to a specific element. If the element is set to anything other than the body of a document it switches from a position: fixed to position: absolute.
position static | fixed | relative | absolute | null null Allows users to specify a custom position to the notification container element.
type string info Defines the style of the notification using bootstraps native alert styles. Please keep in mind that when the notification is generated the type gets prefixed with alert-. When using native alert styles this will not be an issue, but if you create a new style such as pink when setting up the css you have to use the class alert-pink.
allow_dismiss boolean true If this value is set to false it will hide the data-grow="dismiss" element. Please keep in mind if you modify the template setting and do not include a data-notify="dismiss" element even with this set to true there will be no element for a user to click to close the notification.
placement.from string top This controls where if the notification will be placed at the top or bottom of your element.
placement.align string right This controls if the notification will be placed in the left, center or right side of the element.
offset integer 20 This adds padding in pixels between the element and the notification creating a space between their edges.
offset.x integer 20 This adds adding on the x axis in pixels between the element and the notification creating a space between their edges.
offset.y integer 20 This adds padding on the y axis in pixels between the element and the notification creating a space between their edges.
spacing integer 10 This adds a padding in pixels between notifications with the same placement creating a space between their edges.
z_index integer 1031 Pretty simple, this sets the css property z-index for the notification. You may have to raise this number if you have other elements overlapping the notification.
delay integer 5000 If delay is set higher than 0 then the notification will auto-close after the delay period is up. Please keep in mind that delay uses milliseconds so 5000 is 5 seconds.
timer integer 1000 This is the amount of milliseconds removed from the notify at every timer milliseconds. So to make that a little less confusing every 1000 milliseconds there will be 1000 milliseconds removed from the remaining time of the notify delay. If this is set higher then delay the notify will not be removed until timer has run out.
url_target _blank | _self | _parent | _top '_blank' This sets the target of the url for a notification. please check HTML <a> target Attribute to learn more about these options.
mouse_over pause | null null By default this does nothing. If you set this option to pause it will pause the timer on the notification delay. Since version 2.0.0 the timer will not reset it will continue from it's last tick.
animate.enter string animated fadeInDown This will control the animation used to bring the generate the notification on screen. Since version 2.0.0 all animations are controlled using css. This plugin is not com packaged with any animations. Please use Animate.css by Daniel Eden or you can always write your own css animations.
animate.exit string animated fadeOutUp This will control the animation used to bring the generate the notification on screen. Since version 2.0.0 all animations are controlled using css. This plugin is not com packaged with any animations. Please use Animate.css by Daniel Eden or you can always write your own css animations.
onShow function null This event fires immediately when the show instance method is called.
onShow function null This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).
onClose function null This event is fired immediately when the notification is closing.
onClosed function null his event is fired when the modal has finished closing and is removed from the document (will wait for CSS transitions to complete).
icon_type string class This is used to let the plugin know if you are using an icon font for images or if you are using image. If this setting is not set to class it will assume you are using an img. Please keep in mind if you are using an image you to set icon to the src of the image.
template HTML code below Since version 3.0.0 the template option has been revamped in hopes of giving users more control over the layout. Please find the code for the default template below.

Default Template Setup

Bootrstrap Notify uses data attributes (data-notify) to place content with in the notification template.

  • container: Container of notification element
  • dismiss: Element used to allow user to manually close notification
  • icon: Either has a class for an icon image or will generate an html image tag
  • title: Element that the notification will insert the title
  • message: Element that the notification will insert the message
  • progressbar: Element used to show progress bar.
  • url: Element that will have href set if a url is passed.

In version 3+ the template setting was modified to use a combination of data attributes and a C# string.format like function to control the content within the notification.

  • {0} = type
  • {1} = title
  • {2} = message
  • {3} = url
  • {4} = target
<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0}" role="alert"> <button type="button" aria-hidden="true" class="close" data-notify="dismiss">×</button> <span data-notify="icon"></span> <span data-notify="title">{1}</span> <span data-notify="message">{2}</span> <div class="progress" data-notify="progressbar"> <div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div> </div> <a href="{3}" target="{4}" data-notify="url"></a> </div>

Methods

To use a method you have to assign the notification to a variable when it is created. The example below will show you how to create a notification then update the type and message then close it.

Update

var notify = $.notify('...'); notify.update('title', '...'); notify.update('message', '...'); notify.update('icon', '...'); notify.update('url', '...'); notify.update('target', '...');

Close

var notify = $.notify('...'); notify.close();

Example of how to use the methods

var notify = $.notify('<strong>Saving</strong> Do not close this page...', { allow_dismiss: false, delay: 0 }); setTimeout(function() { notify.update('type', 'success'); notify.update('message', '<strong>Success</strong> Your page has been saved!'); }, 3000); setTimeout(function() { notify.close(); }, 8000);

Setting Defaults Globally

$.notifyDefaults({ type: 'success', allow_dismiss: false }); $.notify('You can not close me!');

Close All Notifications

$.notifyDefaults({ allow_dismiss: false, delay: 0 }); var arrayAlign = ["left", "center", "right"]; for (var iLoop = 0; iLoop < arrayAlign.length; iLoop++) { $.notify('Top ' + arrayAlign[iLoop], { placement: { align: arrayAlign[iLoop] } }); } $.notifyDefaults({ placement: { from: "bottom" }, animate:{ enter: "animated fadeInUp", exit: "animated fadeOutDown" } }); for (var iLoop = 0; iLoop < arrayAlign.length; iLoop++) { $.notify('Bottom ' + arrayAlign[iLoop], { placement: { align: arrayAlign[iLoop] } }); } setTimeout(function() { $.notifyClose(); }, 3000);
for (var iLoop = 0; iLoop < 5; iLoop++) { $.notify('I will close before the delay!', { allow_dismiss: false }); } $.notify('I will not close until my delay is up.', { allow_dismiss: false, placement: { from: 'bottom', align: 'left' } }); setTimeout(function() { $.notifyClose('top-right'); }, 3000);

Examples

Basic Bootstrap Notify

$.notify("Hello World");

Passing in a title

$.notify({ title: "Welcome:", message: "This plugin has been provided to you by Robert McIntosh aka mouse0270" });

Passing HTML

$.notify({ title: "<strong>Welcome:</strong> ", message: "This plugin has been provided to you by Robert McIntosh aka mouse0270" });
$.notify({ title: "<strong>Welcome:</strong> ", message: "This plugin has been provided to you by Robert McIntosh aka <a href=\"https://twitter.com/Mouse0270\" target=\"_blank\">@mouse0270</a>" });

Using a Font Icon

$.notify({ icon: 'glyphicon glyphicon-star', message: "Everyone loves font icons! Use them in your notification!" });
$.notify({ icon: 'fa fa-paw', message: "You're not limited to just Bootstrap Font Icons" });

Using Images Instead of Font Icons

$.notify({ icon: "img/growl_64x.png", message: " I am using an image." },{ icon_type: 'image' });

Using a URL

By default the plugin will set the target to _blankM causing the browser to open another window/tab when clicking on the notification.

$.notify({ message: "Check out my twitter account by clicking on this notification!", url: "https://twitter.com/Mouse0270" });

Using a URL with a Specific Target

You are able to set the target using two ways. You can either pass it within the options or the settings. The first example below is passing it as an option and the second example is passing it as a setting.

$.notify({ message: "Check out my twitter account by clicking on this notification!", url: "https://twitter.com/Mouse0270", target: "_self" });
$.notify({ message: "Check out my twitter account by clicking on this notification!", url: "https://twitter.com/Mouse0270" },{ url_target: "_self" });

Please keep in mind that if you pass a target in the options it will override the settings. Below is demonstarting this. The first example will open in the same window because we have update the notify defaults by setting url_target to _self. The Second example will up in a new window/tab even though we have we set the default to _self because we passed the target as _blank.

$.notifyDefaults({ url_target: "_self" }); $.notify({ message: "Check out my twitter account by clicking on this notification!", url: "https://twitter.com/Mouse0270" });
$.notifyDefaults({ url_target: "_self" }); $.notify({ message: "Check out my twitter account by clicking on this notification!", url: "https://twitter.com/Mouse0270", target: "_blank" });

Using Offset

You can pass an offset to make the notifications start farther or closer to the edge of the browser. You can either pass an integer or an object.

$.notify('Hello World', { offset: 50 });
$.notify('Hello World', { offset: { x: 50, y: 100 } });

Using Bootstrap Alert Types

$.notify({ title: '<strong>Heads up!</strong>', message: 'Bootstrap Notify uses Bootstrap Info Alert styling as its default setting.' });
$.notify({ title: '<strong>Heads up!</strong>', message: 'You can use any of bootstraps other alert styles as well by default.' },{ type: 'success' });
$.notify({ title: '<strong>Heads up!</strong>', message: 'You can use any of bootstraps other alert styles as well by default.' },{ type: 'warning' });
$.notify({ title: '<strong>Heads up!</strong>', message: 'You can use any of bootstraps other alert styles as well by default.' },{ type: 'danger' });

Animating Bootstrap Notify

One of the most powerful features in Bootstrap Notify is that you can easily animate how it enters and exits the screen using CSS (Please note that you can no longer animate the notifications using jquery).

$.notify("Enter: Fade In and Down
Exit: Fade Out and Up");
$.notify("Enter: Fade In and Right
Exit: Fade Out and Right", { animate: { enter: 'animated fadeInRight', exit: 'animated fadeOutRight' } });
$.notify("Enter: Bounce In from Top
Exit: Bounce Up and Out", { animate: { enter: 'animated bounceInDown', exit: 'animated bounceOutUp' } });
$.notify("Enter: Bounce In
Exit: Bounce Out", { animate: { enter: 'animated bounceIn', exit: 'animated bounceOut' } });
$.notify("Enter: Flip In on Y Axis
Exit: Flip Out on X Axis", { animate: { enter: 'animated flipInY', exit: 'animated flipOutX' } });
$.notify("Enter: Light Speed In
Exit: Light Speed Out", { animate: { enter: 'animated lightSpeedIn', exit: 'animated lightSpeedOut' } });
$.notify("Enter: Roll In
Exit: Roll Out", { animate: { enter: 'animated rollIn', exit: 'animated rollOut' } });
$.notify("Enter: Zoom Down and In
Exit: Zoom Up and Out", { animate: { enter: 'animated zoomInDown', exit: 'animated zoomOutUp' } });

Newest Notifications On Top

As of Bootstrap Notify 3+ there is a new option that will allow you to have newer notifications push down older ones. If you click on the example below you will notice that each new notification is added after the last notification in the list. However in the second example you will see that it pushes the older notifications down leaving the newest on above the others.

$.notify("Hello World: I was added to the bottom.");
$.notify("Hello World: I was added to the top.", { newest_on_top: true });

Customized Notifications

Below is a list custom styled notifications that you may use as a whole or a starting off point. I'll will occasionally update this list so please check back for more styles.

Minimalist notify Notification by Danny Keane

.alert-minimalist { background-color: rgb(241, 242, 240); border-color: rgba(149, 149, 149, 0.3); border-radius: 3px; color: rgb(149, 149, 149); padding: 10px; } .alert-minimalist > [data-notify="icon"] { height: 50px; margin-right: 12px; } .alert-minimalist > [data-notify="title"] { color: rgb(51, 51, 51); display: block; font-weight: bold; margin-bottom: 5px; } .alert-minimalist > [data-notify="message"] { font-size: 80%; }
$.notify({ icon: 'https://randomuser.me/api/portraits/med/men/77.jpg', title: 'Byron Morgan', message: 'Momentum reduce child mortality effectiveness incubation empowerment connect.' },{ type: 'minimalist', delay: 5000, icon_type: 'image', template: '<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0}" role="alert">' + '<img data-notify="icon" class="img-circle pull-left">' + '<span data-notify="title">{1}</span>' + '<span data-notify="message">{2}</span>' + '</div>' });

Simple Pastel notify Theme by Mark Gilliland

@import url(http://fonts.googleapis.com/css?family=Old+Standard+TT:400,700); [data-notify="container"][class*="alert-pastel-"] { background-color: rgb(255, 255, 238); border-width: 0px; border-left: 15px solid rgb(255, 240, 106); border-radius: 0px; box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.3); font-family: 'Old Standard TT', serif; letter-spacing: 1px; } [data-notify="container"].alert-pastel-info { border-left-color: rgb(255, 179, 40); } [data-notify="container"].alert-pastel-danger { border-left-color: rgb(255, 103, 76); } [data-notify="container"][class*="alert-pastel-"] > [data-notify="title"] { color: rgb(80, 80, 57); display: block; font-weight: 700; margin-bottom: 5px; } [data-notify="container"][class*="alert-pastel-"] > [data-notify="message"] { font-weight: 400; }
$.notify({ title: 'Email: Erica Fisher', message: 'Investment, stakeholders micro-finance equity health Bloomberg; global citizens climate change. Solve positive social change sanitation, opportunity insurmountable challenges...' },{ type: 'pastel-warning', delay: 5000, template: '<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0}" role="alert">' + '<span data-notify="title">{1}</span>' + '<span data-notify="message">{2}</span>' + '</div>' });
$.notify({ title: 'Application Installing', message: 'Developing nations social innovation shift globalization, invest safeguards life-expectancy positive social change. Gender care, new approaches empowerment diversity.' },{ type: 'pastel-info', delay: 5000, template: '<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0}" role="alert">' + '<span data-notify="title">{1}</span>' + '<span data-notify="message">{2}</span>' + '</div>' });
$.notify({ title: 'EVERYTHING IS CRASHING!', message: 'Working families Global South working alongside NGO research breakthrough insights public-private partnerships. Tackle contribution, equal opportunity, design thinking.' },{ type: 'pastel-danger', delay: 5000, template: '<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0}" role="alert">' + '<span data-notify="title">{1}</span>' + '<span data-notify="message">{2}</span>' + '</div>' });
Back to the Top