Bootstrap Toasts

A Toast is a small notification component that displays a short message to the user.

Toasts are commonly used for:

• Success messages.
• Login notifications.
• Save confirmations.
• Error messages.
• System status updates.
• Background process notifications.

A basic Bootstrap Toast contains a Toast container and Toast content.

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

    <div class="toast-body">

        Hello! This is a Toast.

    </div>

</div>

The .toast class creates the main Bootstrap Toast component.

<div class="toast">

    Toast message

</div>

The Toast can contain a header and body.

The .toast-body class is used for the main message content of a Toast.

<div class="toast">

    <div class="toast-body">

        Your profile has been updated.

    </div>

</div>

A Toast can contain a header using the .toast-header class.

<div class="toast">

    <div class="toast-header">

        <strong class="me-auto">
        Notification
        </strong>

        <small>
        Just now
        </small>

    </div>


    <div class="toast-body">

        Your message has been received.

    </div>

</div>

A close button allows the user to dismiss the Toast manually.

<button
type="button"
class="btn-close"
data-bs-dismiss="toast"
aria-label="Close">

</button>

The data-bs-dismiss="toast" attribute tells Bootstrap to close the Toast.

A container can be used to group Toasts and control their position.

<div
class="toast-container
position-fixed
bottom-0
end-0
p-3">

    <div class="toast">

        <div class="toast-body">

            Hello!

        </div>

    </div>

</div>

Bootstrap positioning utilities can be used with Toast containers.

Toast notifications can be positioned using Bootstrap's positioning utilities.

Common positions include:

• Top-left.
• Top-center.
• Top-right.
• Middle-left.
• Center.
• Middle-right.
• Bottom-left.
• Bottom-center.
• Bottom-right.

<div
class="toast-container
position-fixed
top-0
end-0
p-3">

    ...

</div>

A Toast can be displayed using the Bootstrap JavaScript API.

const toastElement =
document.getElementById(
'myToast'
);

const toast =
new bootstrap.Toast(
toastElement
);

toast.show();

The show() method makes the Toast visible.

The following example creates a button that displays a Toast.

A Toast can automatically hide after a specified delay.

const toast =
new bootstrap.Toast(
toastElement,
{
    delay: 5000
}
);

toast.show();

The delay is measured in milliseconds. A value of 5000 represents approximately 5 seconds.

The data-bs-autohide option controls whether the Toast automatically hides after the delay.

<div
class="toast"
data-bs-autohide="false">

    <div class="toast-body">

        This Toast stays visible.

    </div>

</div>

When automatic hiding is disabled, the user can close the Toast using the close button.

The data-bs-delay attribute can specify the delay before the Toast automatically hides.

<div
class="toast"
data-bs-delay="5000">

    <div class="toast-body">

        This message will remain for a few seconds.

    </div>

</div>

Toasts are useful for displaying successful operations.

A Toast can display an error or warning message.

<div class="toast">

    <div class="toast-header">

        <strong class="me-auto">
        Error
        </strong>

        <button
        type="button"
        class="btn-close"
        data-bs-dismiss="toast"
        aria-label="Close">

        </button>

    </div>

    <div class="toast-body">

        Unable to save your information.

    </div>

</div>

Multiple Toast notifications can be displayed on the same page.

<div class="toast-container">

    <div class="toast">

        <div class="toast-body">

            First notification.

        </div>

    </div>


    <div class="toast">

        <div class="toast-body">

            Second notification.

        </div>

    </div>

</div>

A Toast container helps keep multiple Toasts organized.

Toast content can include buttons or links.

<div class="toast">

    <div class="toast-body">

        <span>
        New course available.
        </span>

        <a
        href="#"
        class="btn btn-primary btn-sm ms-2">

            View

        </a>

    </div>

</div>

An icon can be included inside the Toast header or body to make the message easier to recognize.

<div class="toast-header">

    <span class="me-2">
    ✅
    </span>

    <strong class="me-auto">
    Success
    </strong>

    <button
    type="button"
    class="btn-close"
    data-bs-dismiss="toast"
    aria-label="Close">

    </button>

</div>

Toast bodies can contain different HTML elements.

<div class="toast-body">

    <h6>
    New Assignment
    </h6>

    <p>
    Your new assignment is ready.
    </p>

    <button
    class="btn btn-primary btn-sm">

        Open Assignment

    </button>

</div>

Accessibility is important when using Toast notifications.

Useful attributes include:

• role="alert" for important alert-style messages.
• aria-live to communicate dynamic content changes.
• aria-atomic to indicate how the updated region should be announced.
• Meaningful text that clearly describes the notification.
• A close button for Toasts that remain visible.

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

    <div class="toast-body">

        Your payment was successful.

    </div>

</div>

Bootstrap positioning utilities can be used to place Toasts at different locations.

<div
class="toast-container
position-fixed
bottom-0
end-0
p-3">

    <div class="toast">

        <div class="toast-body">

            Notification

        </div>

    </div>

</div>

Here, position-fixed, bottom-0, and end-0 position the Toast container near the bottom-right of the viewport.

Toasts are commonly used in web applications after actions such as saving, deleting, updating, or submitting information.

function showSuccess(){

    const toastElement =
    document.getElementById(
    'successToast'
    );

    const toast =
    new bootstrap.Toast(
    toastElement
    );

    toast.show();

}

For example, after a successful form submission, JavaScript can show a Toast confirming the operation.

Bootstrap Toast provides methods for controlling its state.

• show() – displays the Toast.
• hide() – hides the Toast.
• dispose() – removes the Toast instance.

const toast =
new bootstrap.Toast(
toastElement
);

toast.show();

toast.hide();

toast.dispose();

Bootstrap Toast provides events that can be used to execute code when the Toast changes state.

• show.bs.toast
• shown.bs.toast
• hide.bs.toast
• hidden.bs.toast

const toastElement =
document.getElementById(
'myToast'
);

toastElement.addEventListener(
'shown.bs.toast',
function(){

    console.log(
    'Toast is visible'
    );

});

Toasts are intended for short notifications. If a message contains a large amount of information, consider using a Modal, Alert, or normal page content instead.

Avoid these common mistakes:

• Forgetting to initialize the Toast with JavaScript when required.
• Using duplicate Toast IDs.
• Forgetting the Bootstrap JavaScript bundle.
• Making notifications disappear too quickly.
• Putting too much information inside a Toast.
• Using only colors to communicate message meaning.
• Forgetting a close button for persistent Toasts.
• Using Toasts for information that must always remain visible.

Toast and Alert components have different purposes.

A Toast and Modal are also designed for different situations.

The following example creates a practical notification Toast.

This complete example combines a Toast container, header, message, close button, automatic hiding, and JavaScript initialization.

<button
type="button"
class="btn btn-primary"
id="completeToastButton">

    Show Notification

</button>


<div
class="toast-container
position-fixed
bottom-0
end-0
p-3">


    <div
    id="completeToast"
    class="toast"
    role="alert"
    aria-live="assertive"
    aria-atomic="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">

            Your operation was completed successfully.

        </div>


    </div>


</div>


<script>

document.getElementById(
'completeToastButton'
).addEventListener(
'click',
function(){

    const toastElement =
    document.getElementById(
    'completeToast'
    );

    const toast =
    new bootstrap.Toast(
    toastElement,
    {
        delay: 5000
    }
    );

    toast.show();

});

</script>