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.
Pixelium Nest47 min ago
Start in minutes and get help from a real person whenever you need it.
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<span class="d-inline-block rounded me-2 bg-primary" style="width:1rem;height:1rem"></span><strong class="me-auto">Pixelium Nest</strong><small class="text-body-secondary">47 min ago</small>
<button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Start in minutes and get help from a real person whenever you need it.
</div>
</div>2Translucent
Toasts are slightly translucent, so they blend over coloured or busy backgrounds.
Heads upnow
Clear prices, honest advice and no surprises along the way.
<div class="p-4 rounded 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-body-secondary">now</small>
<button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Clear prices, honest advice and no surprises along the way.
</div>
</div>
</div>3Stacking
Several toasts in a <code>.toast-container</code> stack with even spacing.
Pixelium Nestjust now
Your launch was saved.
Pixelium Nest2 seconds ago
Heads up, Leo joined the team.
Pixelium Nest5 seconds ago
Your trial ends in 8 days.
<div class="toast-container position-static">
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<span class="d-inline-block rounded me-2 bg-success" style="width:1rem;height:1rem"></span><strong class="me-auto">Pixelium Nest</strong><small class="text-body-secondary">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="d-inline-block rounded me-2 bg-info" style="width:1rem;height:1rem"></span><strong class="me-auto">Pixelium Nest</strong><small class="text-body-secondary">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, Leo joined the team.
</div>
</div>
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<span class="d-inline-block rounded me-2 bg-warning" style="width:1rem;height:1rem"></span><strong class="me-auto">Pixelium Nest</strong><small class="text-body-secondary">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 8 days.
</div>
</div>
</div>4Custom content
Leave out the header and put the message and close button side by side.
Hello, Maya! Welcome back.
<div class="toast show align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
<i class="bi bi-emoji-smile-fill" aria-hidden="true"></i> Hello, Maya! 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.
Leo invited you to A checklist for your next website launch.
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Leo invited you to <strong>A checklist for your next website launch</strong>.
<div class="mt-2 pt-2 border-top d-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.
We keep things simple, so you can focus on what matters to you.
<div class="toast show align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
<i class="bi bi-bell-fill" aria-hidden="true"></i> We keep things simple, so you can focus on what matters to you.
</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 #PO-5516 completed.
Storage is 80% full.
Could not reach the server.
<div class="toast-container position-static">
<div class="toast show align-items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
<i class="bi bi-check-circle-fill" aria-hidden="true"></i> Payment #PO-5516 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 align-items-center text-bg-warning border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
<i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i> Storage is 80% 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 align-items-center text-bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-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.
Pixelium Nestnow
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 position-static mt-3">
<div id="toast-1219" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<span class="d-inline-block rounded me-2 bg-primary" style="width:1rem;height:1rem"></span><strong class="me-auto">Pixelium Nest</strong><small class="text-body-secondary">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 position-static mt-3">
<div id="toast-1220" class="toast align-items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-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 position-static mt-3">
<div id="toast-1221" class="toast border-danger" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<span class="text-danger 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 position-static mt-3">
<div id="toast-1222" class="toast align-items-center text-bg-dark border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex align-items-center">
<div class="toast-body">
Moved to archive.
</div>
<button type="button" class="btn btn-link btn-sm text-warning text-decoration-none 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="d-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 position-static mt-3">
<div id="toast-1223" class="toast align-items-center text-bg-info border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-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 align-items-center text-bg-warning border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-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 align-items-center text-bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-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.
Amara VargayesterdayWe have helped more than a hundred companies launch, rebrand and grow online.
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="../assets/img/avatar-7.svg" class="rounded me-2" width="20" height="20" alt="Amara Varga"><strong class="me-auto">Amara Varga</strong><small class="text-body-secondary">yesterday</small>
<button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
We have helped more than a hundred companies launch, rebrand and grow online.
<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
855 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">
855 files were backed up.
</div>
<div class="progress rounded-0" 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 position-static mt-3">
<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="d-flex gap-2 align-items-center">
<img src="../assets/img/product-7.svg" class="rounded" width="48" height="48" alt="Logo refresh">
<div>
<div class="fw-semibold small">
Logo refresh
</div>
<div class="small text-body-secondary">
$3,000
</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.
Pixelium Nestnow
Shown in the bottom right corner.
<div class="position-relative bg-body-tertiary rounded" style="min-height:220px">
<div class="toast-container position-absolute bottom-0 end-0 p-3">
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<span class="d-inline-block rounded me-2 bg-secondary" style="width:1rem;height:1rem"></span><strong class="me-auto">Pixelium Nest</strong><small class="text-body-secondary">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="position-relative bg-body-tertiary rounded" style="min-height:200px">
<div class="toast-container position-absolute top-50 start-50 translate-middle">
<div class="toast show align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-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 position-static mt-3">
<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.
Pixelium Nest 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="d-flex gap-3">
<span class="fs-3 text-warning"><i class="bi bi-cookie" aria-hidden="true"></i></span>
<div>
<p class="mb-2">Pixelium Nest uses cookies to remember your preferences.</p>
<div class="d-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.4 is ready
Every detail is handled by people who care about getting it right.
<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 position-static mt-3">
<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.4 is ready</strong>
<button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Every detail is handled by people who care about getting it right.
<div class="mt-2">
<button type="button" class="btn btn-sm btn-primary">Update now</button>
</div>
</div>
</div>
</div>