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.

Bootstrap class

.toast

Common use cases

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

Variants and classes

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

Code example

HTML

<!-- 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>

Live examples

Success Toast

Close the toast with its button, then bring it back with Show toast.

Example 1

Stacked Toasts

Multiple toasts stacked in a fixed container position.

Example 2

Canvas template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

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.