Toast Notification Stack

<div class="container py-4">
  <div class="position-relative" style="min-height:240px">
    <div class="toast show mb-2 shadow" role="alert">
      <div class="toast-header"><i class="bi bi-check-circle-fill text-success me-2"></i><strong class="me-auto">Success</strong><small>now</small><button class="btn-close" data-bs-dismiss="toast"></button></div>
      <div class="toast-body">Your changes have been saved.</div>
    </div>
    <div class="toast show mb-2 shadow" role="alert">
      <div class="toast-header"><i class="bi bi-info-circle-fill text-primary me-2"></i><strong class="me-auto">Info</strong><small>1m ago</small><button class="btn-close" data-bs-dismiss="toast"></button></div>
      <div class="toast-body">New update available. <a href="#">Refresh</a> to apply.</div>
    </div>
    <div class="toast show shadow" role="alert">
      <div class="toast-header"><i class="bi bi-exclamation-triangle-fill text-warning me-2"></i><strong class="me-auto">Warning</strong><small>3m ago</small><button class="btn-close" data-bs-dismiss="toast"></button></div>
      <div class="toast-body">Session expires in 5 minutes.</div>
    </div>
  </div>
</div>