<div class="container py-5 text-center">
  <div class="d-flex gap-2 justify-content-center flex-wrap">
    <button class="btn btn-success btn-sm" data-type="success">Trigger success</button>
    <button class="btn btn-danger btn-sm" data-type="danger">Trigger error</button>
    <button class="btn btn-secondary btn-sm" data-type="info">Trigger info</button>
  </div>
  <p class="text-muted small mt-3">Toasts stack, each auto-dismisses after 4s, or click × to close early.</p>
</div>

<div class="toast-container position-fixed bottom-0 end-0 p-3" id="bstoastContainer"></div>

.bstoast-item { min-width: 260px; }

const container = document.getElementById('bstoastContainer');

const MESSAGES = {
  success: { icon: '✓', bg: 'text-bg-success', text: 'Changes saved successfully.' },
  danger:  { icon: '✕', bg: 'text-bg-danger',  text: 'Something went wrong — try again.' },
  info:    { icon: 'i', bg: 'text-bg-secondary', text: 'A new version is available.' },
};

// Each click creates and mounts a brand-new toast element, then hands it to
// a fresh bootstrap.Toast instance — stacking is just normal DOM flow inside
// the fixed container, so any number can be visible/queued at once.
document.querySelectorAll('[data-type]').forEach(btn => {
  btn.addEventListener('click', () => {
    const cfg = MESSAGES[btn.dataset.type];
    const el = document.createElement('div');
    el.className = 'toast bstoast-item align-items-center border-0 ' + cfg.bg;
    el.setAttribute('role', 'alert');
    el.innerHTML =
      '<div class="d-flex">' +
      '<div class="toast-body"><strong>' + cfg.icon + '</strong>&nbsp; ' + cfg.text + '</div>' +
      '<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>' +
      '</div>';
    container.appendChild(el);

    const toast = new bootstrap.Toast(el, { delay: 4000 });
    toast.show();
    // Bootstrap hides the element on timeout/dismiss but never removes it —
    // clean up the DOM once its own hide animation has actually finished.
    el.addEventListener('hidden.bs.toast', () => el.remove());
  });
});