Create Customizable Notification Bars Using Bootstrap 5 Alerts

bootstrap.alert.js is a jQuery plugin that gives you the ability to dynamically create notification bars using the Bootstrap 5 alerts component.

With this plugin, you can create your notification bars very easily in all your projects. Also, the function of this plugin is responsivos, that means that all your notifications are display correctly in all devices.

How to use it:

1. Load the latest jQuery library, Bootstrap 5 framework, and Bootstrap Icons (OPTIONAL) in the document.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Bootstrap 5 -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

<!-- Bootstrap Icons -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap-icons.min.css" />

2. Load the jQuery bootstrap.alert.js plugin's files.

<link rel="stylesheet" href="css/jquery.bootstrap.alert.css" />
<script src="js/jquery.bootstrap.alert.js"></script>

3. Call the function bootstrapAlert on the target container in which you'd like to place the notification bar.

$('#my-container').bootstrapAlert({
  // ...
});

4. Add your own content and/or heading to the notification bar.

$('#my-container').bootstrapAlert({
  content: 'Notification Content',
  heading: 'Optional Heading'
});

5. Set the notification type. All available types:

• danger
• dark
• info
• light
• primary (default)
• secondary
• success
• warning

$('#my-container').bootstrapAlert({
  content: 'Notification Content',
  type: 'danger',
});

6. Add a custom icon to the notification bar. Requires Bootstrap Icons.

$('#my-container').bootstrapAlert({
  content: 'Notification Content',
  icon: 'bell-fill', // without the bi bi- prefix
});

7. Determine whether to auto dismiss the notification bar after a timeout. Default: false.

$('#my-container').bootstrapAlert({
  content: 'Notification Content',
  fadeout: true,
  duration: 3, // 3 seconds, default: 1
});

8. Determine whether the notification bar is dismissable. Default: true.

$('#my-container').bootstrapAlert({
  content: 'Notification Content',
  dismissible: false,
});

9. Callback functions.

$('#my-container').bootstrapAlert({
  content: 'Notification Content',
  onShow() {/* ... */}
  onDismiss() {/* ... */}
});

---

This awesome jQuery plugin is developed by Fedec96. For more Advanced Usages, please check the demo page or visit the official website.