Bootstrap 5 Toasts: Complete Guide with Examples

Quick answer: A Bootstrap 5 toast is a lightweight notification built from div.toast with a toast-header and toast-body. Put the toast inside a div.toast-container positioned with classes such as position-fixed bottom-0 end-0, then show it with the JavaScript API bootstrap.Toast.getOrCreateInstance(el).show(). Toasts do not stack or auto-dismiss on their own — you control both with options and markup. The usual mistake is expecting a toast to appear without ever calling show().

Part of our Bootstrap series. New to the framework? Start with getting started with Bootstrap 5.

Markup for one toast

A toast is static markup plus a JavaScript call. Build the element once and reuse it for every message.

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive"
       aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Saved</strong>
      <small>just now</small>
      <button type="button" class="btn-close"
              data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">Your changes were saved.</div>
  </div>
</div>

const el = document.getElementById('liveToast');
bootstrap.Toast.getOrCreateInstance(el, { delay: 4000 }).show();

The toast-container is what fixes the toast to a corner. Without it the toast renders in the normal document flow, which is why so many first attempts look “broken” — the element is there, just inline. The aria-live attribute means screen readers announce the message without stealing focus.

Placement and options

Position class on the container	Where the toast appears
top-0 start-0	Top left
top-0 end-0	Top right
bottom-0 start-0	Bottom left
bottom-0 end-0	Bottom right
top-50 start-50 translate-middle	Centred

Option	Default	Effect
animation	true	Fade and slide transition on show and hide
autohide	true	Hide automatically after the delay
delay	5000	Milliseconds before auto-hide

Stacking several toasts

Put multiple toasts inside the same container and they stack vertically in source order. That makes the container the only thing you position, and each toast handles its own lifecycle.

<div class="toast-container position-fixed top-0 end-0 p-3">
  <div class="toast show"><div class="toast-body">Upload complete</div></div>
  <div class="toast show"><div class="toast-body">Index rebuilt</div></div>
</div>

The show class renders a toast open without JavaScript, which is useful for server-rendered flash messages: PHP (or your framework) prints the class when there is a notice to display, and the user dismisses it with the close button. Reach for the JavaScript API only when the message appears in response to something the user does on the page, such as a successful save or a copied link. If two messages can appear at once, give each its own toast element inside the container rather than rewriting one element’s text, so a fast sequence of actions never overwrites a notice the user has not read yet.

Toasts versus alerts

They solve different problems. An alert is inline content that pushes the page down and stays until the user dismisses it — right for form errors and important warnings that must not be missed. A toast floats above the page, disappears by itself and never blocks the layout — right for confirmations such as “saved” or “copied”. Using toasts for errors is the classic accessibility mistake, because a toast can vanish before someone reads it.

Common mistakes

• No container. Without toast-container plus a position class the toast sits inline and looks broken.
• Never calling show(). Data attributes alone do not open a toast; it is a JavaScript-only component.
• Using toasts for critical errors. Auto-hiding messages should never carry information the user must act on.
• Duplicate ids. If you reuse one toast element, keep a single id and update its body text rather than cloning markup.
• Ignoring reduced motion. Set animation:false when the user has requested reduced motion.

Toasts pair naturally with the components that trigger them — a submit from the forms and validation guide, a confirm action in a modal, or a selection from a dropdown menu.

Building a notification system and want the UX reviewed? Ampersand Academy teaches front-end development one-to-one, using your own project as the curriculum.

Frequently asked questions