Dismiss All Toasts
Sometimes you need to hide all visible toasts — for example, when navigating away from a page or when the user clicks "clear all".
Bootstrap
Intermediate
3 min read
Dismissing All Toasts
Example
<button class="btn btn-secondary" onclick="dismissAll()">Clear All</button>
<script>
function dismissAll() {
document.querySelectorAll(".toast.show").forEach(el => {
bootstrap.Toast.getInstance(el)?.hide();
});
}
</script> Pro Tip
Use bootstrap.Toast.getInstance() to get an existing instance without creating a new one.