Bootstrap 5Feedback

Bootstrap 5 Toast

Bootstrap 5 toasts are lightweight, non-disruptive notification messages that appear temporarily in a corner of the screen. Unlike modals, toasts don't require user interaction — they auto-dismiss after a configurable delay. They're commonly used for action confirmations, sync status, and background process updates.

Primary Class

.toast

Common Use Cases

→Form submission confirmation
→File save/sync status
→Copy to clipboard feedback
→Payment confirmation
→Background process completion
→Error notifications

Variants & Classes

Variant	Description	Classes
Basic toast	Header with title/timestamp and body.	`toast + toast-header + toast-body`
Minimal toast	Just a toast-body, no header.	`toast + toast-body (no toast-header)`
Coloured toast	Background colour for contextual feedback.	`toast text-bg-success (or danger, warning)`
Toast container	Stack multiple toasts in a positioned container.	`toast-container position-fixed bottom-0 end-0 p-3`

Code Example

<!-- Toast container (bottom-right) -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="successToast" class="toast text-bg-success" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex align-items-center">
      <div class="toast-body fw-semibold">
        ✓ Page generated successfully. Downloading now.
      </div>
      <button type="button" class="btn-close btn-close-white ms-auto me-2"
        data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
  </div>
</div>

<!-- JavaScript trigger -->
<script>
  const toastEl = document.getElementById('successToast');
  const toast = new bootstrap.Toast(toastEl, { delay: 4000 });
  toast.show();
</script>

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Stacked toast queue for multiple events
✓Toast with avatar and action button
✓Progress toast for file upload status
✓Persistent toast requiring dismissal
✓Toast with undo action link

Best Practices

Position toasts with fixed containers

Wrap all toasts in a div.toast-container with position-fixed and a corner position class (bottom-0 end-0, top-0 start-0, etc.). This stacks multiple toasts correctly and keeps them out of page flow.

Use aria-live='assertive' for important notifications

aria-live='assertive' tells screen readers to announce the toast immediately when it appears. Use 'polite' for non-critical status updates that shouldn't interrupt the user.

FAQ

How do I show a Bootstrap 5 toast with JavaScript?

const toastEl = document.getElementById('myToast'); const toast = new bootstrap.Toast(toastEl, { delay: 3000 }); toast.show(); The delay option sets milliseconds before auto-dismiss.