Bootstrap Toast: Notifications in Bootstrap 5

A Bootstrap toast is a small notification that slides in, usually in a corner of the screen, says something like “Changes saved”, and disappears on its own after a few seconds. Toasts are built from plain markup plus Bootstrap’s toast plugin, and like tooltips and popovers they must be shown with JavaScript. This guide covers the markup, showing a toast, positioning, stacking several, colors, timing, accessibility, and creating toasts on the fly. Everything is for Bootstrap 5.3.

A toast and a button that shows it

<button type="button" class="btn btn-primary" id="save-btn">Save</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="saved-toast" class="toast" role="status" aria-live="polite" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Settings</strong>
      <small class="text-body-secondary">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 toast = bootstrap.Toast.getOrCreateInstance(document.querySelector('#saved-toast'))
document.querySelector('#save-btn').addEventListener('click', () => toast.show())

Load Bootstrap’s JavaScript bundle before this script. A toast is hidden until you call show(); Bootstrap never shows one on its own.

The parts

A header isn’t required. For a compact toast, put the message and the close button in the body:

<div class="toast align-items-center" role="status" aria-live="polite" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">Link copied to clipboard.</div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Position toasts on the screen

The container decides where toasts appear. Combine position-fixed with the position utilities:

p-3 keeps the toasts off the window edges. Put the container just before </body> so nothing clips it.

Stack several toasts

Put several toasts in the same container. It adds space between them, and newer ones appear in the order you add them to the page:

<div class="toast-container position-fixed top-0 end-0 p-3">
  <div class="toast" role="status" aria-live="polite" aria-atomic="true">...</div>
  <div class="toast" role="status" aria-live="polite" aria-atomic="true">...</div>
</div>

Colors

Color a whole toast with text-bg-* and drop the border:

<div class="toast align-items-center text-bg-success border-0" role="status" aria-live="polite" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">Payment received.</div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

On a dark background, the close button needs to be light. Add data-bs-theme="dark" to the toast, or to the button. The older btn-close-white class is deprecated in Bootstrap 5.3.

Timing: auto-hide and delay

A toast hides itself after 5 seconds by default. Change it with data attributes or options:

<!-- Hide after 10 seconds -->
<div class="toast" data-bs-delay="10000" role="status" aria-live="polite" aria-atomic="true">...</div>

<!-- Stay until the user closes it -->
<div class="toast" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">...</div>

const toast = new bootstrap.Toast(el, { delay: 8000, autohide: true, animation: true })

If a toast stays open (autohide: false), give it a close button, or users have no way to dismiss it.

Accessibility

Toasts appear without the user doing anything nearby, so screen readers need to be told about them:

• Routine messages (“Saved”, “Copied”): role="status" aria-live="polite", which reads the message when the screen reader is idle.
• Important messages (errors that need action): role="alert" aria-live="assertive", which interrupts. Errors people must fix often work better as an in-page alert that stays until dismissed.
• Always add aria-atomic="true", so the whole message is read, not only the changed part.

Give users enough time to read: 5 seconds suits a few words, so increase the delay for longer messages. Don’t put the only copy of important information in a toast that disappears.

Create toasts with JavaScript

To show a toast for any message without writing markup for each, build it on the fly:

function showToast(message, color = 'primary') {
  const container = document.querySelector('.toast-container')
  const el = document.createElement('div')
  el.className = `toast align-items-center text-bg-${color} border-0`
  el.setAttribute('role', 'status')
  el.setAttribute('aria-live', 'polite')
  el.setAttribute('aria-atomic', 'true')
  el.innerHTML = `<div class="d-flex"><div class="toast-body"></div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button></div>`
  el.querySelector('.toast-body').textContent = message
  el.querySelector('.btn-close').setAttribute('data-bs-theme', 'dark')
  container.append(el)
  el.addEventListener('hidden.bs.toast', () => el.remove())
  bootstrap.Toast.getOrCreateInstance(el).show()
}

showToast('Changes saved', 'success')

The message goes in with textContent, so text from users can’t inject HTML, and each toast removes itself from the page once hidden.

Style toasts

Toasts use CSS variables:

.toast {
  --bs-toast-max-width: 400px;
  --bs-toast-padding-x: 1rem;
  --bs-toast-bg: #0b1220;
  --bs-toast-color: #fff;
  --bs-toast-header-bg: #111827;
  --bs-toast-header-color: #fff;
}

In Sass, $toast-max-width (350px), $toast-background-color, and $toast-header-background-color set the defaults. Toasts follow dark mode automatically.

FAQ

How do I show a toast in Bootstrap 5?

Add the toast markup to the page, load bootstrap.bundle.min.js, then call bootstrap.Toast.getOrCreateInstance(element).show(), for example from a button’s click handler. Toasts are hidden until you show them with JavaScript.

Why is my Bootstrap toast not showing?

Usually because nothing calls show(): toasts never appear on their own. Also check that Bootstrap’s JavaScript is loaded and that the toast isn’t inside an element with overflow: hidden or display: none.

How do I position a Bootstrap toast in the top right corner?

Put the toast in <div class="toast-container position-fixed top-0 end-0 p-3">. Use bottom-0 instead of top-0 for the bottom right, or start-0 instead of end-0 for the left side.

How do I change how long a Bootstrap toast stays visible?

Set data-bs-delay in milliseconds on the toast, or the delay option in JavaScript. The default is 5000 (5 seconds). Set data-bs-autohide="false" to keep it open until the user closes it.

How do I change the color of a Bootstrap toast?

Add text-bg-success, text-bg-danger, or another text-bg-* class and border-0 to the .toast. On a dark background, add data-bs-theme="dark" to the close button so it turns light.