Toasts
Toasts are small, temporary notifications that appear and fade away.
In this page:
Syntax
<div class="toast" id="toast-id" role="alert">
<div class="toast-header">Title</div>
<div class="toast-body">Message</div>
</div>
<script>
new bootstrap.Toast(document.getElementById('toast-id')).show();
</script>Toasts
A .toast with .toast-header and .toast-body is hidden until shown with JavaScript: new bootstrap.Toast(element).show(). Options include autohide and delay.
Put toasts inside a .toast-container with position utilities to place them in a corner. role="alert" makes them announced.
Note:
Toasts need JavaScript to show; they are hidden by default.
Example: Toasts
<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3">
<div class="container">
<button class="btn btn-primary" id="showToast">Show toast</button>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header"><strong class="me-auto">Bootstrap</strong><small>just now</small><button class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div>
<div class="toast-body">Hello! This is a toast message.</div>
</div>
</div>
</div>
<script>
document.getElementById("showToast").addEventListener("click", () => {
bootstrap.Toast.getOrCreateInstance(document.getElementById("liveToast")).show();
});
</script>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Expecting toasts to show automatically
- Missing toast-container placement
- Missing role alert and aria-live
Chapter Summary
- toast, toast-header, toast-body
- Show with new bootstrap.Toast(el).show()
- autohide and delay options
- Position in a toast-container
🔒
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: