Toasts are small, temporary notifications for saves, errors, messages and updates. Some examples here are always visible so you can see the styling; the others appear when you press their button. Containers stack several toasts neatly, and helper classes position them anywhere.
1Basic toast
A visible toast (<code>.toast.show</code>) with header, timestamp, close button and a short message.
Xenoara Pro32 min ago
Not sure about the size? Our fit guide and live chat help you choose.
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<span class="inline-block rounded-md me-2 bg-primary" style="width:1rem;height:1rem"></span><strong class="me-auto">Xenoara Pro</strong><small class="text-muted">32 min ago</small>
<button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Not sure about the size? Our fit guide and live chat help you choose.
</div>
</div>2Translucent
Toasts are slightly translucent, so they blend over coloured or busy backgrounds.
Heads upnow
Order before 2 pm and most items leave our warehouse the same day.
<div class="p-6 rounded-md bg-primary-subtle">
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="bi bi-info-circle-fill" aria-hidden="true"></i> <strong class="me-auto">Heads up</strong><small class="text-muted">now</small>
<button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Order before 2 pm and most items leave our warehouse the same day.
</div>
</div>
</div>3Stacking
Several toasts in a <code>.toast-container</code> stack with even spacing.
Xenoara Projust now
Your launch was saved.
Xenoara Pro2 seconds ago
Heads up, Omar joined the goal.
Xenoara Pro5 seconds ago
Your trial ends in 2 days.
<div class="toast-container static">
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<span class="inline-block rounded-md me-2 bg-success" style="width:1rem;height:1rem"></span><strong class="me-auto">Xenoara Pro</strong><small class="text-muted">just now</small>
<button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Your launch was saved.
</div>
</div>
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<span class="inline-block rounded-md me-2 bg-info" style="width:1rem;height:1rem"></span><strong class="me-auto">Xenoara Pro</strong><small class="text-muted">2 seconds ago</small>
<button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Heads up, Omar joined the goal.
</div>
</div>
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<span class="inline-block rounded-md me-2 bg-warning" style="width:1rem;height:1rem"></span><strong class="me-auto">Xenoara Pro</strong><small class="text-muted">5 seconds ago</small>
<button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Your trial ends in 2 days.
</div>
</div>
</div>4Custom content
Leave out the header and put the message and close button side by side.
Hello, Hana! Welcome back.
<div class="toast show items-center" role="alert" aria-live="assertive" aria-atomic="true">
<div class="flex">
<div class="toast-body">
<i class="bi bi-emoji-smile-fill" aria-hidden="true"></i> Hello, Hana! Welcome back.
</div>
<button type="button" class="me-2 m-auto btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
</div>5With actions
Buttons below the message for a decision directly in the toast.
Lea invited you to Looking back at a busy season.
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Lea invited you to <strong>Looking back at a busy season</strong>.
<div class="mt-2 pt-2 border-t flex gap-2">
<button type="button" class="btn btn-primary btn-sm">Accept</button>
<button type="button" class="btn btn-secondary btn-sm" data-ui-dismiss="toast">Close</button>
</div>
</div>
</div>6Color scheme
<code>.text-bg-primary .border-0</code> and a white close button for a solid coloured toast.
Clear prices, honest advice and no surprises along the way.
<div class="toast show items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="flex">
<div class="toast-body">
<i class="bi bi-bell-fill" aria-hidden="true"></i> Clear prices, honest advice and no surprises along the way.
</div>
<button type="button" class="me-2 m-auto btn-close btn-close-white" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
</div>7Status variants
Success, warning and danger messages in one container.
Payment #INV-9536 completed.
Storage is 88% full.
Could not reach the server.
<div class="toast-container static">
<div class="toast show items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="flex">
<div class="toast-body">
<i class="bi bi-check-circle-fill" aria-hidden="true"></i> Payment #INV-9536 completed.
</div>
<button type="button" class="me-2 m-auto btn-close btn-close-white" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="toast show items-center text-bg-warning border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="flex">
<div class="toast-body">
<i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i> Storage is 88% full.
</div>
<button type="button" class="me-2 m-auto btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="toast show items-center text-bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="flex">
<div class="toast-body">
<i class="bi bi-x-circle-fill" aria-hidden="true"></i> Could not reach the server.
</div>
<button type="button" class="me-2 m-auto btn-close btn-close-white" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>8Live toast
Click the button: <code>data-demo-toast="#id"</code> shows the hidden toast, which hides itself after a few seconds.
Xenoara Pronow
Hello! This toast appeared on demand.
<button type="button" class="btn btn-primary" data-demo-toast="#toast-1219">Show live toast</button>
<div class="toast-container static mt-4">
<div id="toast-1219" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<span class="inline-block rounded-md me-2 bg-primary" style="width:1rem;height:1rem"></span><strong class="me-auto">Xenoara Pro</strong><small class="text-muted">now</small>
<button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello! This toast appeared on demand.
</div>
</div>
</div>9Success on save
A green confirmation toast after a save button is pressed.
All changes saved.
<button type="button" class="btn btn-success" data-demo-toast="#toast-1220"><i class="bi bi-floppy-fill" aria-hidden="true"></i> Save changes</button>
<div class="toast-container static mt-4">
<div id="toast-1220" class="toast items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="flex">
<div class="toast-body">
<i class="bi bi-check2-circle" aria-hidden="true"></i> All changes saved.
</div>
<button type="button" class="me-2 m-auto btn-close btn-close-white" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>10Error message
A danger toast with a header and a retry link.
Upload failed
The file is larger than 25 MB. Try again
<button type="button" class="btn btn-outline-danger" data-demo-toast="#toast-1221">Simulate an error</button>
<div class="toast-container static mt-4">
<div id="toast-1221" class="toast border-danger" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<span class="text-danger-emphasis me-2"><i class="bi bi-exclamation-octagon-fill" aria-hidden="true"></i></span><strong class="me-auto">Upload failed</strong>
<button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
The file is larger than 25 MB. <a href="#" class="link-danger">Try again</a>
</div>
</div>
</div>11Undo action
A dark toast confirming a move, with an Undo button - the classic pattern for reversible actions.
Moved to archive.
<button type="button" class="btn btn-outline-secondary" data-demo-toast="#toast-1222"><i class="bi bi-archive-fill" aria-hidden="true"></i> Archive item</button>
<div class="toast-container static mt-4">
<div id="toast-1222" class="toast items-center text-bg-dark border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="flex items-center">
<div class="toast-body">
Moved to archive.
</div>
<button type="button" class="btn btn-link btn-sm text-warning-emphasis no-underline ms-auto" data-ui-dismiss="toast">Undo</button>
<button type="button" class="me-2 btn-close btn-close-white" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>12Several triggers
Each button shows its own toast; they stack in one container.
New comments are waiting.
Your session ends in 5 minutes.
Payment method declined.
<div class="flex flex-wrap gap-2">
<button type="button" class="btn btn-sm btn-info" data-demo-toast="#toast-1223">Info</button>
<button type="button" class="btn btn-sm btn-warning" data-demo-toast="#toast-1224">Warning</button>
<button type="button" class="btn btn-sm btn-danger" data-demo-toast="#toast-1225">Danger</button>
</div>
<div class="toast-container static mt-4">
<div id="toast-1223" class="toast items-center text-bg-info border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="flex">
<div class="toast-body">
New comments are waiting.
</div>
<button type="button" class="me-2 m-auto btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div id="toast-1224" class="toast items-center text-bg-warning border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="flex">
<div class="toast-body">
Your session ends in 5 minutes.
</div>
<button type="button" class="me-2 m-auto btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div id="toast-1225" class="toast items-center text-bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="flex">
<div class="toast-body">
Payment method declined.
</div>
<button type="button" class="me-2 m-auto btn-close btn-close-white" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>13Message notification
Avatar, name and a message preview with a reply button.
Luna Quinn17 hours agoFree shipping on orders over $50 and easy returns within 30 days.
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="../assets/img/avatar-1.svg" class="rounded-md me-2" width="20" height="20" alt="Luna Quinn"><strong class="me-auto">Luna Quinn</strong><small class="text-muted">17 hours ago</small>
<button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Free shipping on orders over $50 and easy returns within 30 days.
<div class="mt-2">
<button type="button" class="btn btn-sm btn-outline-primary"><i class="bi bi-reply-fill" aria-hidden="true"></i> Reply</button>
</div>
</div>
</div>14With a timer bar
A thin progress bar at the bottom suggests how long the toast stays.
Backup done
723 files were backed up.
<div class="toast show overflow-hidden" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="bi bi-cloud-check-fill" aria-hidden="true"></i><strong class="me-auto ms-2">Backup done</strong>
<button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
723 files were backed up.
</div>
<div class="progress rounded-none" role="progressbar" aria-label="Time left" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height:3px">
<div class="progress-bar" style="width: 60%">
</div>
</div>
</div>15Added to cart
A product thumbnail, name and price after an add-to-cart click.
Added to cart
<button type="button" class="btn btn-dark" data-demo-toast="#toast-1226"><i class="bi bi-cart-plus-fill" aria-hidden="true"></i> Add to cart</button>
<div class="toast-container static mt-4">
<div id="toast-1226" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="bi bi-bag-check-fill" aria-hidden="true"></i> <strong class="me-auto">Added to cart</strong>
<button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
<div class="flex gap-2 items-center">
<img src="../assets/img/product-10.svg" class="rounded-md" width="48" height="48" alt="Face oil">
<div>
<div class="font-semibold small">
Face oil
</div>
<div class="small text-muted">
$39.99
</div>
</div>
<a href="#" class="btn btn-sm btn-primary ms-auto">Checkout</a>
</div>
</div>
</div>
</div>16Placement in a corner
A container positioned bottom-right inside a relative box - the same idea used at page level.
Xenoara Pronow
Shown in the bottom right corner.
<div class="relative bg-surface-3 rounded-md" style="min-height:220px">
<div class="toast-container absolute bottom-0 end-0 p-4">
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<span class="inline-block rounded-md me-2 bg-secondary" style="width:1rem;height:1rem"></span><strong class="me-auto">Xenoara Pro</strong><small class="text-muted">now</small>
<button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Shown in the bottom right corner.
</div>
</div>
</div>
</div>17Centered placement
<code>.top-50 .start-50 .translate-middle</code> center the container.
You are offline. Changes are kept locally.
<div class="relative bg-surface-3 rounded-md" style="min-height:200px">
<div class="toast-container absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2">
<div class="toast show items-center" role="alert" aria-live="assertive" aria-atomic="true">
<div class="flex">
<div class="toast-body">
<i class="bi bi-wifi-off" aria-hidden="true"></i> You are offline. Changes are kept locally.
</div>
<button type="button" class="me-2 m-auto btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
</div>18Stays until closed
<code>data-ui-autohide="false"</code> keeps the toast visible until the user closes it.
Pinned notice
This message waits for you to close it.
<button type="button" class="btn btn-outline-primary" data-demo-toast="#toast-1227">Show persistent toast</button>
<div class="toast-container static mt-4">
<div id="toast-1227" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-ui-autohide="false">
<div class="toast-header">
<i class="bi bi-pin-angle-fill" aria-hidden="true"></i> <strong class="me-auto">Pinned notice</strong>
<button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
This message waits for you to close it.
</div>
</div>
</div>19Cookie notice
A wider static toast with a short notice and two buttons.
Xenoara Pro uses cookies to remember your preferences.
<div class="toast show" style="width:100%;max-width:440px" role="alert" aria-live="polite" aria-atomic="true">
<div class="toast-body">
<div class="flex gap-4">
<span class="text-2xl text-warning-emphasis"><i class="bi bi-cookie" aria-hidden="true"></i></span>
<div>
<p class="mb-2">Xenoara Pro uses cookies to remember your preferences.</p>
<div class="flex gap-2">
<button type="button" class="btn btn-primary btn-sm" id="cookie-1228" data-ui-dismiss="toast">Accept</button>
<button type="button" class="btn btn-outline-secondary btn-sm" data-ui-dismiss="toast">Only essential</button>
</div>
</div>
</div>
</div>
</div>20Longer delay
<code>data-ui-delay="10000"</code> keeps an update notice on screen for ten seconds.
Version 4.3 is ready
Pay securely with card, wallet or in three interest-free instalments.
<button type="button" class="btn btn-secondary" data-demo-toast="#toast-1229"><i class="bi bi-arrow-clockwise" aria-hidden="true"></i> Check for updates</button>
<div class="toast-container static mt-4">
<div id="toast-1229" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-ui-delay="10000">
<div class="toast-header">
<i class="bi bi-rocket-takeoff-fill" aria-hidden="true"></i> <strong class="me-auto">Version 4.3 is ready</strong>
<button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Pay securely with card, wallet or in three interest-free instalments.
<div class="mt-2">
<button type="button" class="btn btn-sm btn-primary">Update now</button>
</div>
</div>
</div>
</div>