36 Free Bootstrap Toast Notification Examples (2026)

By Aigars Silkalns · 22-min read

Save confirmations, undo after a delete, sync errors with a retry, offline indicators, upload progress: Bootstrap’s toast component sits behind most of the transient notifications in a modern web app. This collection has 36 free Bootstrap toast notification examples, starting with 12 toast components we designed in 2026 and followed by 24 curated Bootstrap 5.3 examples.

The Colorlib set covers a classic auto-dismiss stack, an undo snackbar, a chat toast with inline reply, a loading-to-success promise toast, an invitation, an added-to-cart toast, upload progress, swipe to dismiss and a stack that fans out on hover. Each is a free download with a live demo, written in plain HTML, CSS and vanilla JavaScript with no Bootstrap or jQuery required, and it looks the same on its own or inside a Bootstrap 4, 5 or 6 project.

The 24 curated examples are working Bootstrap 5.3 implementations of the patterns developers ship most: success, error, warning and info variants, Gmail-style undo, retry on network errors, countdown bars, positions, stacks, a persistent offline indicator and dark mode. Each links to its original on CodePen, GitHub or the Bootstrap docs if you want to fork or compare.

What is a Bootstrap toast?

A Bootstrap toast is a lightweight, dismissible notification that appears briefly in a corner of the screen to inform users about an event — a successful save, an undo opportunity, a connection error. Toasts are non-blocking (the user can keep working while they’re visible) and typically auto-hide after a few seconds. Bootstrap 5 ships toasts as a native component with positioning, animation, and stack-management built in.

When to use a toast:

• Confirming an action just completed (“Item added to cart”)
• Surfacing a non-critical error (“Couldn’t sync — retrying in 10s”)
• Offering a reversible action (“Email deleted — Undo”)
• Live-status updates that don’t need user input

Bootstrap 5 vs Bootstrap 4 toasts: Bootstrap 4 introduced the Toast component in 4.2 (October 2018), but it required manual positioning and offered no stacking helper. Bootstrap 5 added the .toast-container class for declarative positioning, improved the JS API (bootstrap.Toast), and refined the default styling. The auto-hide behavior is now opt-in via data-bs-autohide="false" — defaulting to auto-hide.

Browser support: All modern browsers; Bootstrap 5 dropped Internet Explorer support. The 24 curated examples below were tested in Chrome 124, Safari 17 and Firefox 125 in May 2026.

How to use Bootstrap toasts (basic markup)

<!-- 1. Toast container (place once, anywhere — positioning is via class) -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <!-- 2. The toast itself -->
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Notification</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.</div>
  </div>
</div>

<!-- 3. Trigger -->
<button type="button" class="btn btn-primary" id="showToastBtn">Show toast</button>

<script>
  const toastEl = document.getElementById('liveToast');
  const toast = new bootstrap.Toast(toastEl);
  document.getElementById('showToastBtn').addEventListener('click', () => toast.show());
</script>

Common gotcha: Toasts are hidden by default — you cannot make them visible by removing a class. You must call .show() via the JavaScript API, or use the data-attribute trigger.

Free Colorlib Bootstrap Toast Snippets

We designed these 12 toast components in 2026: a classic stack with progress lines, an undo snackbar, chat, loading-to-success, invitation, added-to-cart, upload progress, swipe-to-dismiss and a stacked pile. Each uses live regions, pauses on hover and focus, and closes with Esc. Each is a free download with a live demo.

Toast V01: Classic top-right toast stack with auto-dismiss and a progress line

A top-right stack of white toasts in four variants: success, info, warning and error. Each toast has a tinted status icon, a title, a short message, a close button and a thin progress line that shrinks until it closes itself. Error toasts use role="alert" and the rest are announced politely.

Best for: dashboards, admin panels and SaaS apps that need general-purpose feedback messages. Plain HTML and CSS with a few lines of vanilla JavaScript, a 532 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Toast V02: Bottom-centre snackbar with an Undo action

A shared-drive file list where deleting a file shows a dark snackbar at the bottom centre of the screen. Pressing Undo puts the file back in its original position and briefly highlights it. Only one snackbar shows at a time, so a new deletion replaces the previous message.

Best for: file managers, inboxes, to-do lists and any list with destructive actions. Plain HTML and CSS with a few lines of vanilla JavaScript, a 191 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Toast V03: Chat message toast with avatar, preview and inline reply

An incoming-message toast for a team chat app, with the sender's photo and online dot, name, source and a two-line preview of the message. Reply opens a small form inside the toast and keeps it on screen while you type; sending swaps the toast for a short confirmation. Mark as read closes it and updates the unread count.

Best for: chat apps, support inboxes, collaboration tools and social products. Plain HTML and CSS with a few lines of vanilla JavaScript, a 215 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Toast V04: Icon-led minimal white toasts at the top centre

Minimal white toasts that drop in at the top centre of the page, each led by a solid coloured status icon with a soft halo. There are five types: saved, info, warning, error and link copied. The cards have no border, only a layered soft shadow, and stay compact enough for short one-line messages.

Best for: clean marketing sites, editors, form feedback and lightweight web apps. Plain HTML and CSS with a few lines of vanilla JavaScript, a 165 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Toast V05: Promise toast that goes from loading to success or failure

A loading toast that follows an upload: it shows a spinner and an indeterminate bar while the promise runs, then changes in place to a success or an error message. The success state links to the file and closes on its own; the error state stays until dismissed and offers a Retry button. The demo panel has one button for each outcome.

Best for: file uploads, form submissions, payments and any async action in a web app. Plain HTML and CSS with a few lines of vanilla JavaScript, a 193 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Toast V06: Invitation toast with Accept and Decline buttons

A deep teal invitation toast for board and meeting invites, with the sender's photo, a small type badge, the invite details and two clear answer buttons. Choosing Accept or Decline replaces the buttons with a short confirmation, which closes by itself after three seconds. Invites never time out, because they wait for an answer.

Best for: collaboration tools, calendars, team workspaces and community apps. Plain HTML and CSS with a few lines of vanilla JavaScript, a 173 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Toast V07: Added-to-cart toast with product thumbnail, price and cart links

An e-commerce toast that confirms an item was added to the cart. It shows the product photo, name, variant, quantity and price, the running cart subtotal, and View cart and Checkout links. The cart icon in the header bumps its count at the same time.

Best for: online shops, product pages and quick-add buttons on category grids. Plain HTML and CSS with a few lines of vanilla JavaScript, a 200 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Toast V08: Dark compact toasts at the bottom left

Small, dark, single-line toasts in the style of modern productivity apps, stacked at the bottom left of the screen. Each has a tinted icon, a short message, an optional action such as View, Undo or Retry, and a close button. The demo sits next to a dark quick-actions menu with keyboard hints.

Best for: issue trackers, developer tools, dark dashboards and keyboard-driven apps. Plain HTML and CSS with a few lines of vanilla JavaScript, a 8 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Toast V09: Toast position playground with six anchors

A playful demo with a small screen map and six buttons that fire toasts at the top left, top centre, top right, bottom left, bottom centre or bottom right of the viewport. Each anchor is its own live region, and all six share one toast manager so Esc and Clear all work across them. The neo-brutalist styling uses thick outlines, offset shadows and a different colour per position.

Best for: design system docs, component showcases and choosing a toast position for a product. Plain HTML and CSS with a few lines of vanilla JavaScript, a 130 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Toast V10: Upload progress toast with per-file bars and cancel buttons

A corner upload manager for several files at once. The dark header shows how many files are still uploading and a time estimate, with an overall progress line under it. Each file row has a type badge, a real progressbar, the uploaded size and a cancel button. The list can be collapsed, and the toast closes itself a few seconds after everything has finished.

Best for: cloud storage, CMS media libraries, project tools and any bulk upload screen. Plain HTML and CSS with a few lines of vanilla JavaScript, a 204 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Toast V11: Rich notification toast with image and swipe to dismiss

A large notification card for a travel app with a photo, a label chip, a title, a short message, a call-to-action button and a timestamp. It can be swiped sideways with a mouse, pen or finger using pointer events, and it follows the pointer and fades as it moves. A close button and the Esc key do the same job for keyboard and screen reader users.

Best for: travel, social, media and consumer apps that send image-led reminders. Plain HTML and CSS with a few lines of vanilla JavaScript, a 501 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Toast V12: Stacked toasts that collapse into a pile and fan out on hover

Toasts pile up like cards at the bottom right, with the newest in front and up to two more peeking out behind it at a smaller scale. Hovering or tabbing into the stack fans every toast out into a readable list and pauses all timers until you leave. A counter above the pile shows how many are waiting, with a Clear all button next to it.

Best for: apps that fire many notifications in a row: dashboards, deploy tools, editors and SaaS products. Plain HTML and CSS with a few lines of vanilla JavaScript, a 144 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Best free Bootstrap toast examples

We grouped the 24 picks by use case rather than ranking them — every example below is a viable production starting point. Each screenshot shows our Bootstrap 5.3 implementation of the pattern, inspired by the original designer credited beneath. The “Original demo” link goes to the source pen or repository for those who want to fork, compare implementations, or see the author’s specific code style.

Showcase — visually distinctive toasts

1. Bootstrap 5 Live Toast

The canonical Bootstrap 5 toast — button-triggered, header with brand icon, title, timestamp, and dismiss button, plus a body message. Best fit as the baseline for any project: this is the markup every other toast pattern in this collection builds on. Pure Bootstrap 5.3 with the JavaScript bundle for the toast controller. Initialize via new bootstrap.Toast(el) or bootstrap.Toast.getOrCreateInstance(el).show(). Include role="alert" aria-live="assertive" aria-atomic="true" on the toast element so screen readers announce the entire message immediately on appearance.

Inspired by: Bootstrap (twbs) · License: MIT

Source & details Original demo

2. Translucent Toast

The translucent toast variant uses Bootstrap’s default backdrop-filter: blur styling to blend over hero images, video backgrounds, and busy gradients without losing legibility. Best fit for marketing landing pages, photo galleries, and any UI where the toast appears over rich visual content. Pure Bootstrap 5.3 — no custom CSS beyond the default toast classes. The blur effect requires modern browser support; degrades gracefully to a solid background in older browsers. Pair with text-body-secondary for the timestamp so it stays readable against any backdrop tint.

Inspired by: Bootstrap (twbs) · License: MIT

Source & details Original demo

3. Stripe-Style Animated Checkmark

Stripe-style success toast with a circular checkmark icon, two-line message (header + sub), and a depleting progress bar at the bottom — the exact aesthetic Stripe, Linear, and Vercel use for payment confirmations and deploy success. Best fit for payment flows, deploy notifications, and any “operation completed cleanly” moment. Custom HTML + CSS on top of Bootstrap; uses inline SVG for the checkmark rather than a font icon for crisp rendering at all sizes. The progress bar width animation pairs with data-bs-delay via a CSS transition synced to the toast’s auto-hide timer.

Inspired by: nttoan1202 · License: CodePen default (attribution required)

Source & details Original demo

4. Glassmorphism Toast

Glassmorphism toast with backdrop-blur, neon accent dot, and high-contrast white text — the modern productivity-tool aesthetic (Linear, Arc, Raycast) for dark-themed dashboards. Best fit for dev tools, gaming UIs, and any product whose visual language already lives in the dark-theme / vibrant-accent register. Pure CSS layered on top of Bootstrap’s toast structure; uses backdrop-filter: blur(20px) saturate(180%) for the glass effect and a neon glow via box-shadow on the accent dot. Backdrop-filter is unsupported in older Firefox; degrades to a solid semi-transparent background.

Inspired by: Matt Cannon · License: CodePen default (attribution required)

Source & details Original demo

Status variants — success, error, warning, info, loading

5. Success Toast

The canonical success toast — green text-bg-success background, check-circle icon, and assertive ARIA live region. Best fit for “Settings saved”, “Profile updated”, “Payment successful”, and any positive confirmation that doesn’t require user response. Pure Bootstrap 5 with one utility class (text-bg-success) for the green background plus matching white text and close button. The aria-live="assertive" announces the success immediately — appropriate for confirmation feedback. For status-only updates that shouldn’t interrupt the user, switch to role="status" with aria-live="polite" instead.

Inspired by: Bootstrap (twbs) · License: MIT

Source & details Original demo

6. Error / Danger Toast

Error toast — red text-bg-danger background, exclamation-triangle icon, assertive ARIA live region for time-sensitive failures. Best fit for sync failures, payment declines, validation errors, and any “something just went wrong” moment that needs immediate user awareness. Pure Bootstrap 5 utility classes — no custom CSS. Use role="alert" + aria-live="assertive" so screen readers announce the failure immediately. For error toasts that include a Retry button, increase data-bs-delay to 8000-10000ms so users have time to read the message and decide to act.

Inspired by: Bootstrap (twbs) · License: MIT

Source & details Original demo

7. Warning Toast

Warning toast — yellow text-bg-warning background with exclamation-circle icon. Best fit for non-critical caution states: trial expiry approaching, rate-limit nearing, unsaved changes, storage capacity 80%+. Pure Bootstrap 5; uses role="alert" with aria-live="polite" (vs assertive for danger) because the user can finish their current task before responding. Yellow-on-yellow contrast is the trickiest of all eight variants — Bootstrap uses dark text on the warning background automatically, but verify the close button icon is dark via .btn-close (default) not .btn-close-white.

Inspired by: Bootstrap (twbs) · License: MIT

Source & details Original demo

8. Info Toast

Info toast — blue text-bg-info background, info-circle icon, polite ARIA status role for non-disruptive informational updates. Best fit for “3 new comments”, “system maintenance scheduled”, “tip of the day” — anything the user benefits from knowing but doesn’t need to act on. Pure Bootstrap 5; the role="status" + aria-live="polite" combo is critical here so screen readers don’t interrupt the user’s current task. Info toasts work best with shorter content (under 12 words) — anything longer drifts into territory better served by a banner alert or notification panel.

Inspired by: Bootstrap (twbs) · License: MIT

Source & details Original demo

9. Loading Toast with Spinner

Loading toast with a spinner-border inside the body — the right pattern for async operations (file uploads, batch saves, data syncs) that complete in 2-30 seconds. Best fit for any “this will take a moment” feedback that doesn’t warrant a full-page loading state or modal. Pure Bootstrap 5 — the spinner is the standard .spinner-border.spinner-border-sm with role="status" on the spinner element for screen-reader compatibility. When the async operation completes, swap the toast content with the success variant (toast #5) and keep the same toast element — the transition feels seamless and saves the user a re-read.

Inspired by: floraya · License: CodePen default (attribution required)

Source & details Original demo

Interactive patterns — undo, retry, countdown, upload, avatar

10. Undo Pattern (Gmail-style)

Gmail-style “Email deleted — Undo” pattern. The toast persists for 6 seconds with an inline Undo link; the underlying deletion only commits if the user doesn’t click Undo. Best fit for destructive actions where users might change their mind: email/file deletion, item removal from cart, archive operations. Pure Bootstrap 5 toast markup; the Undo behavior requires a small JavaScript handler that tracks a setTimeout reference and clears it on Undo click. Set data-bs-delay="6000" (default 5000) so users have time to register the action and locate the Undo affordance.

Inspired by: Bootstrap (twbs) · License: MIT

Source & details Original demo

11. Retry Pattern (Network Error)

Network-error toast with Retry button — pattern used by Stripe, Slack, and GitHub for transient connection failures. Best fit for AJAX errors, websocket disconnections, and any user-initiated operation that failed due to network rather than logic. Pure Bootstrap 5 with custom button group via border-top divider. The Retry button should re-attempt the original operation with exponential backoff (1s, 2s, 4s, 8s) before giving up — don’t let users hammer a flaky endpoint by clicking Retry repeatedly. Cancel dismisses the toast without retrying.

Inspired by: pattern · License: MIT (Bootstrap)

Source & details Original demo

12. Toast with Countdown Progress Bar

Toast with countdown progress bar — visual cue showing how much time remains before auto-dismiss. Best fit for “Copied to clipboard”, “Settings saved”, and other transient confirmations where the user benefits from knowing the toast is about to disappear rather than being surprised when it does. Pure CSS — the progress bar uses a ::after pseudo-element with a CSS transition on width synced to the toast’s data-bs-delay. For interactive operations (toast contains a button), pause the progress on hover so users have time to act.

Inspired by: 404ryannotfound · License: CodePen default (attribution required)

Source & details Original demo

13. File Upload Progress Toast

File upload toast with a real Bootstrap progress bar showing upload percentage. Best fit for file uploads, batch processing, and any long-running operation where the user benefits from progress feedback. Pure Bootstrap 5 — uses the standard .progress + .progress-bar components with aria-valuenow, aria-valuemin, and aria-valuemax for screen-reader announcements. Update the progress bar width via JavaScript as upload progresses. For multi-file uploads, render one toast per file in a .toast-container so users can see all in-flight uploads at once.

Inspired by: mtsgeneroso · License: CodePen default (attribution required)

Source & details Original demo

14. Notification with Avatar

Notification with circular avatar header — push-notification panel aesthetic for social apps, messaging tools, and any product where notifications come from specific people. Best fit for @-mention alerts, DM previews, collaboration tools (Slack, Linear, Notion). Pure Bootstrap 5 toast markup with a custom .rounded-circle avatar (here using a CSS gradient + initials; swap for an <img> tag for real user photos). Always include the username and relative timestamp (“2 min ago”) in the header — screen readers announce the entire header before reading the message body.

Inspired by: katrienvh · License: CodePen default (attribution required)

Source & details Original demo

Position demos — top, bottom, center placements

15. Top-Right Toast

Top-right placement via .toast-container.position-fixed.top-0.end-0.p-3 — the de-facto standard for SaaS dashboards (Stripe, Linear, GitHub). Best fit for transient saves and confirmations where the user’s attention is on their work, not the chrome. Pure Bootstrap 5 utility classes — the container’s position-fixed keeps the toast in place during scroll. p-3 on the container creates the standard 1rem gap from the viewport edge. For sites with a fixed top header (navbar), increase the top padding via style="top: 60px" or use a CSS variable so the toast doesn’t appear behind the header.

Inspired by: Ray Villalobos · License: CodePen default (attribution required)

Source & details Original demo

16. Top-Center Toast

Top-center placement via .top-0.start-50.translate-middle-x — used by Linear, Vercel, and Notion for header-area notifications. Best fit for app-wide announcements (“New version available — refresh to update”), broadcast messages, and updates that affect the entire user session rather than a specific page section. Pure Bootstrap 5 — the translate-middle-x utility centers the toast on the horizontal axis without affecting vertical position. The data-bs-theme="dark" works seamlessly on top-center toasts for dark-mode sites; the toast doesn’t compete with sidebar or hero imagery in this position.

Inspired by: Bootstrap (twbs) · License: MIT

Source & details Original demo

17. Bottom-Right Toast

Bottom-right placement via .bottom-0.end-0.p-3 — most common placement for production SaaS dashboards because it avoids interfering with top-of-page chrome (navbar, breadcrumbs) and keeps notifications near the user’s last action. Best fit for sync confirmations, save toasts, and silent status updates (“Last synced 2 min ago”). Pure Bootstrap 5 utility classes. The bottom-right placement plays especially well with chatbot or support widget integrations — both typically sit in the bottom-right, so toasts naturally float just above the widget without overlapping.

Inspired by: ethicist · License: CodePen default (attribution required)

Source & details Original demo

18. Bottom-Center Snackbar

Bottom-center snackbar — Material Design-style pill-shaped notification with auto-dismiss after 3 seconds and an optional Undo action. Best fit for mobile-app interfaces, ecommerce checkouts, and any UI where Material Design conventions are familiar. Custom HTML + CSS (not the default Bootstrap toast markup) — uses border-radius: 24px for the pill shape and dark background with white text and a contrasting Undo link. For consistency with the rest of your app, wrap the snackbar logic in a helper function (showSnackbar(message, actionLabel, onAction)) so the call site stays clean.

Inspired by: inmedev · License: MIT (Bootsnipp default)

Source & details Original demo

19. Middle-Center Toast

Middle-center placement via .top-50.start-50.translate-middle — true viewport center for critical alerts that demand attention but aren’t full-blocking modals. Best fit for security alerts (“New device signed in”), account warnings (“Subscription expired”), and any notification that requires user awareness without blocking the underlying UI. Pure Bootstrap 5 utility classes. The translate-middle shifts the element by 50% of its own width and height — works regardless of the toast’s actual dimensions. Use sparingly: center-positioned toasts feel modal-adjacent, so reserve them for genuinely important alerts.

Inspired by: Bootstrap (twbs) · License: MIT

Source & details Original demo

Stack & queue patterns

20. Stacking Multiple Toasts

Stacking multiple toasts via a single .toast-container with d-flex.flex-column.gap-2. Best fit for dashboards where multiple events fire near-simultaneously: build status updates, real-time notifications, batch operation feedback. Pure Bootstrap 5 — the container handles the vertical spacing automatically; just append new toasts as children. The order matters: newest toast appends at the bottom of the stack (or top, depending on your flex-direction). For high-frequency notifications, implement a queue (see Pattern 1 in Advanced patterns) so toasts don’t flood the screen.

Inspired by: Bootstrap (twbs) · License: MIT

Source & details Original demo

21. Animated Stack with Smooth Transitions

Animated stack with smooth transitions — newer toasts arrive with full opacity while older toasts compress slightly via transform: scale(0.96) and reduced opacity. Best fit for notification-heavy products where the stack itself communicates “newer = more important” without requiring users to read timestamps. Custom CSS layered on top of Bootstrap’s .toast-container. Animate each toast’s transform via CSS transition: transform 0.2s ease, opacity 0.2s ease. For accessibility, ensure the animation respects prefers-reduced-motion: reduce via a media query that disables the transform.

Inspired by: Lekoala · License: CodePen default (attribution required)

Source & details Original demo

22. Stack with Dismiss-All Control

Notification panel header (“Notifications · 4 unread”) with a “Clear all” button plus a stack of contextual status toasts. Best fit for product UIs that surface multiple notifications at once — Slack notification trays, GitHub activity feeds, project management dashboards. The “Clear all” button calls bootstrap.Toast.getInstance(el).hide() on every toast in the container. Pure Bootstrap 5 markup. For real-world use, persist the cleared state to localStorage or backend so dismissed notifications don’t reappear on page refresh. Pair with a notification bell icon in the navbar for the trigger.

Inspired by: osalabs · License: MIT

Source & details Original demo

23. Persistent Status (Offline Mode)

Persistent status toast with data-bs-autohide="false" — stays visible indefinitely until the user clicks the close button or your code calls .hide(). Best fit for status indicators that should reflect ongoing state: offline mode, connection lost, sync in progress, maintenance window active. Pure Bootstrap 5 markup. Wire to navigator.onLine events: window.addEventListener('offline', () => toast.show()) and window.addEventListener('online', () => toast.hide()). The colored left border (border-left: 4px solid) is a subtle visual cue that this isn’t a transient toast — it represents persistent state.

Inspired by: fadzrinmadu · License: CodePen default (attribution required)

Source & details Original demo

24. Bootstrap 5.3 Dark-Mode Toast

Bootstrap 5.3 introduced native dark-mode support via data-bs-theme="dark" — every .toast automatically re-tints through the color-mode CSS variable cascade with zero per-component overrides. Best fit for any product that supports system color-scheme preferences or offers a manual dark-mode toggle. Pure Bootstrap 5.3 — the cascade is built into the framework. Apply data-bs-theme="dark" at the <html> level for global dark mode, or scope it to a specific section by setting it on a wrapper div. Both contextual color variants (success/danger/warning/info) and the neutral toast variant automatically adjust their backgrounds and text colors.

Inspired by: Bootstrap (twbs) · License: MIT

Source & details Original demo

Advanced Bootstrap toast patterns

Three patterns the listicle items above hint at but rarely demo in isolation. Each one solves a specific production problem.

Pattern 1 — Programmatic toast queueing. When multiple events fire near-simultaneously (network sync errors during a save), you don’t want 5 toasts on top of each other. Build a queue that respects display delay:

const toastQueue = [];
let isShowing = false;

function enqueueToast({ title, body, variant = 'primary', delay = 4000 }) {
  toastQueue.push({ title, body, variant, delay });
  processQueue();
}

function processQueue() {
  if (isShowing || toastQueue.length === 0) return;
  isShowing = true;
  const { title, body, variant, delay } = toastQueue.shift();
  const el = renderToast({ title, body, variant });
  document.querySelector('.toast-container').appendChild(el);
  const toast = new bootstrap.Toast(el, { delay });
  el.addEventListener('hidden.bs.toast', () => {
    el.remove();
    isShowing = false;
    processQueue();
  });
  toast.show();
}

Pattern 2 — Toast with action button (undo pattern). The Gmail-style “Message deleted — Undo” pattern. The toast persists for 5–8 seconds, the user can click Undo, and the underlying action only commits after the toast hides:

let undoTimer;
function deleteEmail(id) {
  document.getElementById(`email-${id}`).style.display = 'none';
  undoTimer = setTimeout(() => commitDelete(id), 6000);
  const toast = new bootstrap.Toast(document.getElementById('undoToast'));
  toast.show();
  document.getElementById('undoBtn').onclick = () => {
    clearTimeout(undoTimer);
    document.getElementById(`email-${id}`).style.display = '';
    toast.hide();
  };
}

Pattern 3 — Persistent status toast. Some toasts are status indicators that shouldn’t auto-hide — “Offline mode active” until connection returns. Set data-bs-autohide="false" and control visibility programmatically based on app state:

<div class="toast" id="offlineToast" data-bs-autohide="false" role="status" aria-live="polite">
  <div class="toast-body">
    <span class="badge bg-warning">●</span> Offline — changes will sync when reconnected.
  </div>
</div>
<script>
  const toast = new bootstrap.Toast(document.getElementById('offlineToast'));
  window.addEventListener('offline', () => toast.show());
  window.addEventListener('online', () => toast.hide());
</script>

Toast vs Alert vs Modal — when to use which

	Toast	Alert	Modal
Visibility	Briefly visible (auto-hide)	Inline, persistent until dismissed	Blocks page until dismissed
Page interaction	Non-blocking	Non-blocking	Blocking (overlay)
Position	Floating (corners)	Inline within page flow	Centered overlay
Best for	Transient feedback (saved, undo, error)	Persistent contextual messages	User action required
Default behavior	Hidden, opt-in via JS	Always visible	Hidden, opt-in via trigger
ARIA role	alert or status	alert	dialog

When to choose what: If the user can ignore the message and keep working → toast. If the message is context-bound to a specific page section → alert. If user must respond before continuing → modal.

Frequently asked questions

Final thoughts

Bootstrap’s toast component fills the “non-blocking transient feedback” slot under almost every modern web app’s chrome. The patterns above show the spectrum: from the canonical docs reference to Stripe-style payment confirmations, from kebab notification badges to file upload progress bars, from undo affordances to persistent offline indicators. The picks worth committing to memory: the canonical live toast (#1) as your baseline, the Gmail undo pattern (#10) for any destructive operation, the persistent offline indicator (#23) for any app that goes offline, and Bootstrap 5.3’s native dark-mode cascade (#24) for any product that supports theme switching.

Without Bootstrap’s JavaScript, start from the Colorlib set: Toast V01 for a classic auto-dismiss stack, Toast V02 for an undo snackbar and Toast V05 for a promise toast that goes from loading to success or failure.

If you’re building form-validation feedback that lives in the page rather than floating in a corner, see our Bootstrap alert examples. For action-required dialogs that block the page until the user responds, see our Bootstrap modal templates.

Related collections: Bootstrap alert examples · Bootstrap modal templates · Bootstrap dropdown menu examples · Bootstrap form templates · Bootstrap snippet library