Prev Next

BS5 Toast

Bootstrap 5 Toasts are lightweight notifications designed to provide feedback to users. They can appear at the top, bottom, or any corner of the page.

Key Topics

Basic Toast

Create a toast using the .toast class and trigger it manually or programmatically.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
        Hello, world! This is a toast message.
    </div>
</div>

Explanation: The .toast container holds the header and body of the toast. Use data-bs-dismiss to close it.

Toast with Auto Hide

Enable auto-hide functionality by adding the data-bs-autohide="true" attribute to the toast container.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true">
    <div class="toast-header">
        <strong class="me-auto">Bootstrap</strong>
        <small>Just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
        This toast will disappear automatically.
    </div>
</div>

Explanation: The data-bs-autohide="true" attribute ensures the toast disappears after a few seconds.

Stacked Toasts

Display multiple toasts simultaneously by stacking them in a container.

<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto">Toast 1</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            This is the first toast.
        </div>
    </div>
    <div class="toast mt-2" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto">Toast 2</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            This is the second toast.
        </div>
    </div>
</div>

Explanation: Stack multiple toasts in a single container by positioning them using utility classes like .position-fixed.

Complete Toast Example

Below is a complete example combining manual, auto-hide, and stacked toasts.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Toast Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2>Bootstrap Toast</h2>
        <button class="btn btn-primary" onclick="showToast('#manualToast')">Show Manual Toast</button>
        <div id="manualToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <strong class="me-auto">Manual Toast</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                This toast is triggered manually.
            </div>
        </div>
        <!-- Include Auto-hide and Stacked Toasts Here -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function showToast(id) {
            var toastEl = document.querySelector(id);
            var toast = new bootstrap.Toast(toastEl);
            toast.show();
        }
    </script>
</body>
</html>

Explanation: This example demonstrates different toast variations, including manual, auto-hide, and stacked toasts.

Key Takeaways

  • Use .toast for creating toast notifications.
  • Add data-bs-autohide="true" for auto-dismiss functionality.
  • Stack multiple toasts using a container with positioning classes.
Prev Next