Bootstrap 5 Alerts Manipulation Plugin In jQuery - BsAlert

BsAlert is a jQuery plugin to create and manipulate alert messages using the Bootstrap 5's Alerts component.

How to use it:

1. Load the required jQuery library and Bootstrap 5 framework in the document.

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

2. Download and load the BsAlert plugin.

<script src="./js/jquery.bs.alert.min.js"></script>

3. Create a container to hold the alert messages.

<div id="alert-wrapper"></div>

4. Initialize the plugin on the wrapper element and create a Bootstrap alert as follows:

$('#alert-wrapper').bsAlert({
  heading: 'Alert Title',
  content: 'Alert Message. <a href="">HTML Is Supported As Well</a>.',
});

5. Set the alert type:

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

$('#alert-wrapper').bsAlert({
  heading: 'Alert Title',
  content: 'Alert Message. <a href="">HTML Is Supported As Well</a>.',
  type: 'success',
});

6. Determine whether to allow the users to dismiss the alert messages. Default: true.

$('#alert-wrapper').bsAlert({
  heading: 'Alert Title',
  content: 'Alert Message. <a href="">HTML Is Supported As Well</a>.',
  fadeout: true,
  duration: 5, // auto dismiss after 5 seconds
});;

7. Determine whether to auto dismiss the alert message. Default: true.

$('#alert-wrapper').bsAlert({
  heading: 'Alert Title',
  content: 'Alert Message. <a href="">HTML Is Supported As Well</a>.',
  dismissible: false,
});;

8. Add custom icons to the alert messages.

$('#alert-wrapper').bsAlert({
  heading: 'Alert Title',
  content: 'Alert Message. <a href="">HTML Is Supported As Well</a>.',
  icon: 'icon class(es) here',
});

9. Determine whether to clear all the existing alert message when a new one is created. Default: true.

$('#alert-wrapper').bsAlert({
  heading: 'Alert Title',
  content: 'Alert Message. <a href="">HTML Is Supported As Well</a>.',
  clear: false,
});

10. Remove the most recently added alert.

$('#alert-wrapper').bsAlert('remove');

11. Callback functions.

$('#alert-wrapper').bsAlert({
  heading: 'Alert Title',
  content: 'Alert Message. <a href="">HTML Is Supported As Well</a>.',
  onShow: function() {},
  onDismiss: function() {},
});

Changelog:

2022-01-21

• Minor tweaks

2022-01-18

• Removed useless parameters

2022-01-12

• Moved strict mode

2021-12-28

• JS Update

2021-12-26

• JS Update

2021-12-24

• JS Update

2021-12-13

• Update

2021-12-10

• Code Refactor

2021-12-08

• Typo fixed

2021-12-03

• Added clear option

2021-12-02

• Fixed typo

2021-11-29

• Fixed auto dismiss

2021-11-28

• Plugin is stored in the element's data

2021-11-24

• no longer conflicting with shared method names

2021-11-23

• Bugfix

2021-11-23

• Code refactor

2021-11-21

• Added duration param.

2021-11-20

• Changed BsAlert to bsAlert

2021-11-19

• Removed prepend option

2021-11-17

• Removed useless code

2021-11-17

• Fixed onDismiss call for remove()

---

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