Bootstrap - Toasts Part 1: Basic Toast Structure

Bootstrap Toasts rely on specific HTML markup and classes. The basic structure includes a container, a header, and a body.

Examples and Explanation

Basic Toast Markup

<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, this is a basic toast message.

    </div>

</div>

Explanation: This is the basic toast structure. It includes a header with a title, timestamp, and a close button, and a body containing the main message.

Adding a Toast to the DOM

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">

        <div class="toast-header">

            <strong class="me-auto">Notification</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 is a notification message.

        </div>

    </div>

</div>

Explanation: Toasts are often positioned using utility classes. In this example, the toast is placed in the bottom-right corner of the screen.

Minimal Toast

<div class="toast">

    <div class="toast-body">

        Simple toast message without a header.

    </div>

</div>

Explanation: A toast can work without a header for minimal feedback messages.