Bootstrap Toast
A toast is a lightweight notification that slides in to tell the user something happened, then usually disappears on its own. Think of the little "Message sent" or "Saved" messages you see in many apps. Bootstrap 5 toasts are built with flexbox and, like tooltips and popovers, need JavaScript to show and hide.
What Is a Toast?
A toast is a small, non-blocking message that appears briefly to give feedback, such as confirming an action or reporting an error. It does not interrupt the user like a modal does, which makes it ideal for status updates.
The Structure of a Toast
A toast uses a wrapper with the .toast class. Inside, a .toast-header holds a title and a close button, while a .toast-body holds the main message. Both parts are optional, but a header plus body is the most common layout.
A basic toast
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Notification</strong>
<small>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>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Showing a Toast with JavaScript
Because toasts start hidden, you create a Toast instance and call show() when you want it to appear. The snippet below grabs a toast by its id and displays it.
Trigger a toast on button click
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button type="button" class="btn btn-primary" id="showBtn">
Show toast
</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
const toastEl = document.getElementById('myToast');
const toast = new bootstrap.Toast(toastEl);
document.getElementById('showBtn')
.addEventListener('click', () => toast.show());
</script>
</body>
</html>Useful Toast Options
You can control how a toast behaves with a few data attributes placed on the .toast element. The table below covers the ones you will reach for most often.
A toast that stays until closed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="toast" data-bs-autohide="false"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Reminder</strong>
<button type="button" class="btn-close"
data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
I will stay here until you close me.
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Exercise: Bootstrap Toast
What happens if toast markup sits on a page but show() is never called via JavaScript?
