Toasts

Overview

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.

<button class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed top-0 end-0 p-3" style="z-index: 5;">
    <div class="toast hide" id="liveToast">
        <div class="toast-header">
            <i class="fas fa-coffee text-beets me-2"></i>
            <strong class="me-auto">Beets</strong>
            <small>11 mins ago</small>
            <button class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            Hello, world! This is a toast message.
        </div>
    </div>
</div>

Using

<button class="btn btn-primary" id="buttonId">Show live toast</button>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5;">
    <div id="toastId" class="toast">
        ...
    </div>
</div>

<script>
document.getElementById("buttonId").onclick = function() {		
    var myToast = document.getElementById('toastId'); // Select ID of the toast
    
    // Inizialize toast
    var toast = new bootstrap.Toast(myToast, {
        animation: true,
        autohide: true,
        delay: 5000
    });
    
    toast.show(); // Show toast
}
</script>

Custom content

<div class="toast align-items-center">
    <div class="d-flex">
        <div class="toast-body">
            Hello, world! This is a toast message.
        </div>
        <button class="btn-close me-2 m-auto" data-bs-dismiss="toast"></button>
    </div>
</div>

Styling

<div class="toast align-items-center bg-success text-white border-0 w-100">
    <div class="d-flex">
        <div class="toast-body">
            <i class="fas fa-check-circle fa-lg me-2"></i>The record has been saved.
        </div>
        <button class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
    </div>
</div>

Placement

Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you’re only ever going to show one toast at a time, you can put the positioning styles right on the .toast.

<!-- Bottom right placement -->
<div class="toast position-fixed bottom-0 end-0 m-3">
    ...
</div>