Bootstrap Toasts

Overview

Toasts are lightweight notifications designed to mimic push notifications.

Basic Toast

<div class="toast" role="alert">
    <div class="toast-header">
        <strong class="me-auto">Bootstrap</strong>
        <small>just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
        Hello, world! This is a toast message.
    </div>
</div>

<script>
const toast = new bootstrap.Toast(document.querySelector('.toast'));
toast.show();
</script>

Color Schemes

<div class="toast align-items-center text-bg-primary" role="alert">
    <div class="d-flex">
        <div class="toast-body">
            Primary toast
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
    </div>
</div>

Placement

<div class="toast-container position-fixed top-0 end-0 p-3">
    <div class="toast" role="alert">
        <div class="toast-header">
            <strong class="me-auto">Notification</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            Top right toast
        </div>
    </div>
</div>

Next Steps

Next: Bootstrap Scrollspy →