Toast Queue and Limits

Toast Queue Management

When many toasts fire rapidly, limit visible toasts to a maximum number by queueing subsequent ones.

Example

const MAX = 3;
function queueToast(message, type) {
  const visible = document.querySelectorAll(".toast.show").length;
  if (visible >= MAX) {
    // Queue it: wait for the oldest to hide
    const oldest = document.querySelector(".toast.show");
    oldest.addEventListener("hidden.bs.toast",
      () => showToast(message, type), { once: true });
    bootstrap.Toast.getInstance(oldest)?.hide();
  } else {
    showToast(message, type);
  }
}

JAVASCRIPT

Full Editor

Pro Tip

Limiting visible toasts prevents the screen from filling up during bulk operations.

Related Resources

Bootstrap Reference

Complete tag & property list

Bootstrap How-To Guides

Step-by-step practical guides

Bootstrap Exercises

Practice what you've learned