Press "Enter" to skip to content

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

Notify is a Bootstrap notification plugin for creating modern, customizable toast-style notification popups on Bootstrap 4. All custom patterns depend on [data type] as the type must be announced in every notification.

alert in bootstrap 4, bootstrap notify, bootstrap 5 popup alert, bootstrap 5 alert example, bootstrap 5 alert auto close, bootstrap alert popup, bootstrap 4 5 cdn, sweet alert bootstrap

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.

'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

Notifications-Based-on-Bootstrap-and-Font-Awesome


See Demo And Download

Official Website(the-muda-organization): Click Here

This superior jQuery/javascript plugin is developed by the-muda-organization. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *