Bootstrap Notify

Pro Component

The Bootstrap Notify is a beautiful, responsive, customisable, accessible replacement for Javascript’s popup boxes. This plugin helps to turn standard Bootstrap alerts into "growl" like notifications.
Keep reading our Bootstrap Notify examples and learn how to use this plugin.

Usage

CSS

In order to use this plugin on your page you will need to include the following styles in the “Page plugins” area from the page’s head section:

<link rel="stylesheet" href="assets/vendor/animate.css/animate.min.css">

JS

In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:

<script src="assets/vendor/bootstrap-notify/bootstrap-notify.min.js"></script>

Initialization

Please read the official documentation to see the complete list of options and methods.

Examples

<button class="btn btn-default" data-toggle="notify" data-placement="top" data-align="left" data-type="default" data-icon="ni ni-bell-55">Top Left</button>
<button class="btn btn-default" data-toggle="notify" data-placement="top" data-align="center" data-type="default" data-icon="ni ni-bell-55">Top Center</button>
<button class="btn btn-default" data-toggle="notify" data-placement="top" data-align="right" data-type="default" data-icon="ni ni-bell-55">Top Right</button>

<button class="btn btn-default" data-toggle="notify" data-placement="bottom" data-align="left" data-type="default" data-icon="ni ni-bell-55">Bottom Left</button>
<button class="btn btn-default" data-toggle="notify" data-placement="bottom" data-align="center" data-type="default" data-icon="ni ni-bell-55">Bottom Center</button>
<button class="btn btn-default" data-toggle="notify" data-placement="bottom" data-align="right" data-type="default" data-icon="ni ni-bell-55">Bottom Right</button>

Colors

<button class="btn btn-info" data-toggle="notify" data-placement="top" data-align="center" data-type="info" data-icon="ni ni-bell-55">Info</button>

<button class="btn btn-success" data-toggle="notify" data-placement="top" data-align="center" data-type="success" data-icon="ni ni-bell-55">Success</button>

<button class="btn btn-warning" data-toggle="notify" data-placement="top" data-align="center" data-type="warning" data-icon="ni ni-bell-55">Warning</button>

<button class="btn btn-danger" data-toggle="notify" data-placement="top" data-align="center" data-type="danger" data-icon="ni ni-bell-55">Danger</button>

Custom animations

For more animation you can check out the Anime.css library. Simply copy and paste the in/out animation class and add ii on the data-animation-in and data-animation-out.

<button class="btn btn-default" data-toggle="notify" data-placement="top" data-align="center" data-type="default" data-icon="ni ni-bell-55" data-animation-in="animated fadeIn" data-animation-out="animated fadeOut">fadeIn</button>
<button class="btn btn-default" data-toggle="notify" data-placement="top" data-align="center" data-type="default" data-icon="ni ni-bell-55" data-animation-in="animated fadeInDown" data-animation-out="animated fadeOutUp">fadeInDown</button>
<button class="btn btn-default" data-toggle="notify" data-placement="top" data-align="center" data-type="default" data-icon="ni ni-bell-55" data-animation-in="animated bounceIn" data-animation-out="animated bounceOut">bounceIn</button>
<button class="btn btn-default" data-toggle="notify" data-placement="top" data-align="center" data-type="default" data-icon="ni ni-bell-55" data-animation-in="animated flipInX" data-animation-out="animated flipOutX">flipInX</button>
<button class="btn btn-default" data-toggle="notify" data-placement="top" data-align="center" data-type="default" data-icon="ni ni-bell-55" data-animation-in="animated zoomIn" data-animation-out="animated zoomOut">zoomIn</button>