Customizable Stacked Alerts For Bootstrap 5/4 - jQuery Stacked bsAlert

Stacked bsAlert is a jQuery plugin that stacks a group of Bootstrap Alerts in a clean, card-like format. Compatible with Bootstrap 5 and 4 frameworks.

Stacking alerts can save screen real estate and improve user experience. You can customize the number of visible alerts, set the starting z-index, add custom classes, and support multiple alert groups on the same page.You can customize the number of visible alerts, set the starting z-index, add custom classes, and support multiple alert groups on the same page.

This plugin is perfect for applications that require displaying multiple alerts, such as notification systems or error messages.

How to use it:

1. Make sure you have jQuery and Bootstrap installed in your project. You can include them using CDN links:

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

2. Download the Stacked bsAlert plugin and include the main script in your project.

<script src="dist/stacked-bsAlert-jquery.js"></script>

3. Add an alert group to your page.

<div class="alert-group" id="alert-group-example">
  <div class='alert alert-success alert-dismissible fade show'>
    <!-- Your alert content here -->
  </div>
  <!-- Add more alerts as needed -->
</div>

4. Use jQuery to initialize the plugin on your alert group container. You can then customize the plugin's behavior using the following options:

$('#alert-group-example').StackedAlert({

  // number of visible alerts
  visibleAlert: 3, 

  // initial CSS z-index
  startIndex: 1040,

  // append additional CSS classes to the alert
  appendClass: '',

  // spacing between alerts
  stackRange: 6

});

5. Override the default text displayed when all alerts are dismissed.

.alert-group:empty::before {
  content: "No unread messages";
}

---

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