Stylish and Modern Notifications Based on Bootstrap and Font Awesome | Notify

How to make use of it:

1. Load the notify.css and notify.js within the Bootstrap webpage.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link href="/path/to/notify.css" rel="stylesheet">
<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/notify.js"></script>

2. Load the Font Awesome Iconic Font for the notification icons.

<link rel="stylesheet" href="/path/to/fontawesome/all.css">

3. The JavaScript to point out a notification popup on the webpage.

notify(type, title, message)

4. All doable notification varieties:

notify('info', 'Info Message', 'This is an Info notification.');
notify('facebook', 'Message', 'This is a Facebook notification.');
notify('spinner', 'Loading Spinner', 'Loading Something...');
notify('download', 'Download Icon', 'Use Font Awesome Download Icon.');
...

5. Customize the position and styles of the notification by overring the CSS guidelines as you see within the notify.css.

.toast-container {
  width:100%;
  max-width:400px;
  position:fixed;
  bottom:0;
  right:0;
  z-index:1055;
  padding:1rem;
}

6. The notification will routinely dismiss after 5 seconds. You can override the default timeout by change the value of the data-delay attribute within the notify.js.

'data-delay': '6000'

7. Or disable the auto dismiss functionality to create a sticky notification.

'data-autohide': 'true'

Easy Toast-style Notification Plugin For Bootstrap, Notify Bootstrap

See Demo And Download