Bootstrap Toasts

Bootstrap Toasts Overview

A toast is built from a .toast element containing a .toast-header and .toast-body, and is initialized through Bootstrap's JavaScript Toast API rather than a plain data attribute alone—although a trigger button can still use data-bs-toggle to show it. By default, toasts autohide after a delay controlled by data-bs-delay.

Multiple toasts are typically grouped inside a .toast-container positioned in a corner of the screen using position utilities, so new notifications stack neatly without shifting the rest of the page layout.

Bootstrap Toasts Example

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="saveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="4000">
    <div class="toast-header">
      <i class="bi bi-check-circle-fill text-success me-2"></i>
      <strong class="me-auto">Saved</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Your changes have been saved successfully.
    </div>
  </div>
</div>

<script>
  const toastEl = document.getElementById("saveToast");
  const toast = new bootstrap.Toast(toastEl);
  toast.show();
</script>

The toast-container fixes its position to the bottom-right corner of the viewport. Inside, the toast's header shows an icon, title, timestamp, and close button, while the body holds the message text. data-bs-delay sets a 4-second autohide timer, and the script demonstrates triggering the toast programmatically after some event, like a successful save.

Top 10 Bootstrap Toasts Examples

These are the toast patterns you'll use to build lightweight, temporary notifications.

Popular Real-World Bootstrap Toasts Examples

These toast patterns are common for confirmations, background task updates, and system alerts.

Best Practices

• Position toast-container consistently in the same screen corner across the whole app.
• Use data-bs-autohide="false" for important messages users must actively dismiss.
• Include aria-live="assertive" and aria-atomic="true" on toasts so screen readers announce them.
• Keep toast-body messages short and specific; toasts aren't meant for long content.
• Use colored toast variants (text-bg-success, text-bg-danger) to reinforce message type at a glance.
• Trigger toasts programmatically right after the event they describe, not with a delay.
• Stack multiple toasts inside one toast-container rather than creating separate containers.

Common Mistakes

• Forgetting to call the Toast JavaScript API's show() method, so the toast markup never actually appears.
• Setting an autohide delay so short that users can't read the message before it disappears.
• Not positioning the toast-container, causing toasts to appear inline and disrupt the layout.
• Omitting aria-live, missing an important accessibility signal for dynamically appearing content.
• Using toasts for content that requires user interaction beyond simple dismissal.
• Creating a new toast-container for every single toast instead of reusing one positioned container.

Key Takeaways

• Toasts are lightweight notifications built from toast-header and toast-body sections.
• The Bootstrap JavaScript Toast API controls showing, hiding, and autohide timing.
• toast-container with position utilities keeps notifications stacked in a consistent screen corner.
• aria-live and aria-atomic make dynamically appearing toasts accessible.
• Autohide delay should be long enough for users to comfortably read the message.