Bootstrap 5 toasts are lightweight notifications that appear temporarily in a corner of the screen. This page covers 4 toast patterns ā€” basic, colored, progress bar and stacked ā€” each with working copy-paste code.

Quick Setup

Toasts require Bootstrap 5 JS bundle:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Key Classes Reference

ClassWhat It Does
.toastRequired toast wrapper
.toast-headerHeader with title and close button
.toast-bodyMain message content
.showMakes toast visible (for static display)
.position-fixedFixed position wrapper
.top-0.end-0Top-right corner position
.bottom-0.end-0Bottom-right corner position
data-bs-dismiss="toast"Close button attribute
delayAuto-dismiss delay in ms (default 5000)
autohide: falseDisables auto-dismiss

1. Basic Bootstrap 5 Toast

A standard Bootstrap 5 toast with header, body and auto-dismiss. Click the button to show it.

2. Bootstrap 5 Colored Toasts

Toasts with success, warning, danger and info colors using Bootstrap background utilities.

3. Bootstrap 5 Toast with Progress Bar

Toast with an animated progress bar that counts down to auto-dismiss.

4. Bootstrap 5 Toast Stack

Multiple toasts stacked vertically in the corner. Each can be dismissed independently.

Frequently Asked Questions

Initialize and show with: const toast = new bootstrap.Toast(document.getElementById('myToast')); toast.show(). Pass options like delay: 3000 for auto-dismiss after 3 seconds. Use autohide: false to keep it visible until manually dismissed.
Wrap the toast in a position-fixed div with corner positioning utilities: top-0 end-0 p-3 for top-right, bottom-0 end-0 p-3 for bottom-right, bottom-0 start-0 p-3 for bottom-left. Add z-index:1055 to appear above other content.
Place multiple toast elements inside one position-fixed container div with d-flex flex-column gap-2. Bootstrap automatically stacks them vertically. Each toast can be dismissed independently without affecting others.
Pass the delay option in milliseconds: new bootstrap.Toast(el, { delay: 5000 }) for 5 seconds. Set autohide: false to disable auto-dismiss entirely. The default delay is 5000ms (5 seconds).
Listen to the form submit event, prevent default, handle your logic, then show the toast: form.addEventListener('submit', async e => { e.preventDefault(); await saveData(); bootstrap.Toast.getOrCreateInstance(successToast).show(); }). Use different toasts for success and error states.

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components ā€” built by the same team behind BootstrapPlanet.

Browse Templates ā†’

Use code FIRST30 for 30% off your first purchase.

Related Components

Bootstrap 5 Alert Example

View examples ā†’

Bootstrap 5 Modal Example

View examples ā†’

Bootstrap 5 Badge Example

View examples ā†’