Notification - Bootstrap Notify

Bootstrap Notify helps to turn standard bootstrap alerts into "growl" like notifications.

Page Demo Plugin Website

Basic Example

Basic Bootstrap Notify example with least options.

template option is recommended for all notification types in order to provide the design elements correctly.
$.notify({
    message: 'Hello World'
},{
    type: 'inverse',
    allow_dismiss: true,
    template:   '<div data-notify="container" class="alert alert-dismissible alert-{0} alert--notify" role="alert">' +
                    '<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>' +
                    '<button type="button" aria-hidden="true" data-notify="dismiss" class="close"><span>×</span></button>' +
                '</div>'
});

Placements

Control the placement of the notification by changing the placement property.

placement contains 2 addition sub properties: from and align which'll control the vertical position and the alignment repectively.

Usage

$.notify({
    message: 'Hello World'
},{
    type: 'inverse',
    placement: {
        from: 'top', // 'top' or 'bottom'
        align: 'right' // 'left', 'center' or 'right',
    },
    allow_dismiss: true,
    template:   '<div data-notify="container" class="alert alert-dismissible alert-{0} alert--notify" role="alert">' +
                    '<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>' +
                    '<button type="button" aria-hidden="true" data-notify="dismiss" class="close"><span>×</span></button>' +
                '</div>'
});

Notification Types

In addition to the default inverse type, there are additional 4 different types which can be used for various notification entries.

  1. info
  2. success
  3. warning
  4. danger

Usage

Simply edit the type property with the any of the above value to change the appearance of the notification.

$.notify({
    message: 'Hello World'
},{
    type: 'info', // 'inverse', 'success', or 'danger'
    allow_dismiss: true,
    template:   '<div data-notify="container" class="alert alert-dismissible alert-{0} alert--notify" role="alert">' +
                    '<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>' +
                    '<button type="button" aria-hidden="true" data-notify="dismiss" class="close"><span>×</span></button>' +
                '</div>'
});

Animations

For optional notification entrance and exit animation, you can add any in and out animation classes from animation.html

Following is an example with animation classes .fadeInDown and fadeOutUp

$.notify({
    message: 'Hello World'
},{
    type: 'inverse', // 'inverse', 'info', 'success', or 'danger'
    placement: {
        from: 'top', // 'top' or 'bottom'
        align: 'right' // 'left', 'center' or 'right',
    },
    allow_dismiss: true,
    animate: {
        enter: 'animated fadeInDown',
        exit: 'animated fadeOutUp'
    },
    template:   '<div data-notify="container" class="alert alert-dismissible alert-{0} alert--notify" role="alert">' +
                    '<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>' +
                    '<button type="button" aria-hidden="true" data-notify="dismiss" class="close"><span>×</span></button>' +
                '</div>'
});

Requirements:

  • /vendors/bootstrap-notify/bootstrap-notify.min.js