Toasts

Render lightweight notifications with captured header, body, close button, autohide, delay, and placement behavior.

Overview

Toasts are opt-in notifications. They are hidden by default until JavaScript shows them.
Use autohide and delay for transient status messages. Keep interactive toasts visible until users act or dismiss them.
Place toast live regions in the page before showing a message so assistive technology can announce updates reliably.
BCL covers the toast root, header, body, and toast container captures.

Basic toast

A basic toast has a header, body, optional close button, and a visible or programmatically announced message.

Hello, world! This is a toast message.

aspnet


<bs-toast show="true" autohide="false">
    <bs-toast-header>
        <bs-div bg-color="Primary" border-rounding="All" end-margin="Default2" style="width: 1rem; height: 1rem;"></bs-div>
        <bs base-tag-name="strong" end-margin="Auto">Bootstrap</bs>
        <bs-small>11 mins ago</bs-small>
        <bs-close-button data-bs-dismiss="toast" aria-label="Close" />
    </bs-toast-header>
    <bs-toast-body>Hello, world! This is a toast message.</bs-toast-body>
</bs-toast>

Live example

Initialize the toast and call show() when a user action or application event should display it.

Hello, world! This is a toast message.

aspnet


<bs-button btn-style="Primary" onclick="bootstrap.Toast.getOrCreateInstance(document.getElementById('liveDocsToast')).show()">Show live toast</bs-button>
<bs-toast-container padding="Default3" position="Fixed" bottom-offset="Zero" end-offset="Zero">
    <bs-toast id="liveDocsToast">
        <bs-toast-header>
            <bs-div bg-color="Primary" border-rounding="All" end-margin="Default2" style="width: 1rem; height: 1rem;"></bs-div>
            <bs base-tag-name="strong" end-margin="Auto">Bootstrap</bs>
            <bs-small>11 mins ago</bs-small>
            <bs-close-button data-bs-dismiss="toast" aria-label="Close" />
        </bs-toast-header>
        <bs-toast-body>Hello, world! This is a toast message.</bs-toast-body>
    </bs-toast>
</bs-toast-container>

Translucent

Toast backgrounds are intentionally translucent, so choose placement and surrounding content that keep the message readable.

Toast backgrounds are slightly translucent so content behind them can show through.

aspnet


<bs-toast show="true" autohide="false">
    <bs-toast-header>
        <bs-div bg-color="Success" border-rounding="All" end-margin="Default2" style="width: 1rem; height: 1rem;"></bs-div>
        <bs base-tag-name="strong" end-margin="Auto">System</bs>
        <bs-small>just now</bs-small>
        <bs-close-button data-bs-dismiss="toast" aria-label="Close" />
    </bs-toast-header>
    <bs-toast-body>Toast backgrounds are slightly translucent so content behind them can show through.</bs-toast-body>
</bs-toast>

Stacking

Multiple toasts stack vertically inside the same toast container in the order they are rendered or shown.

First stacked toast with persistent content.

Second stacked toast follows the first in the same container.

aspnet


<bs-toast-container position="Static">
    <bs-toast show="true" autohide="false">
        <bs-toast-body>First stacked toast with persistent content.</bs-toast-body>
    </bs-toast>
    <bs-toast show="true" autohide="false">
        <bs-toast-body>Second stacked toast follows the first in the same container.</bs-toast-body>
    </bs-toast>
</bs-toast-container>

Custom content

Use custom content for inline actions, but keep the toast persistent when users must interact with it.

Custom content can include inline actions.

aspnet


<bs-toast align-items="Center" show="true" autohide="false">
    <bs-toast-body>
        <bs-div display="Flex">
            <bs-div flex-grow="One">Custom content can include inline actions.</bs-div>
            <bs-close-button end-margin="Default2" margin="AutoOrDefault" data-bs-dismiss="toast" aria-label="Close" />
        </bs-div>
    </bs-toast-body>
</bs-toast>

Color schemes

Use color schemes for status emphasis while keeping the text itself explicit. Pair dark backgrounds with a close button variant that remains visible.

Primary color scheme with dismiss control.

aspnet


<bs-toast bg-color="Primary" bg-contrasts-text="true" align-items="Center" removed-borders="All" show="true" autohide="false">
    <bs-toast-body>
        <bs-div display="Flex">
            <bs-div flex-grow="One">Primary color scheme with dismiss control.</bs-div>
            <bs-close-button end-margin="Default2" margin="AutoOrDefault" white="true" data-bs-dismiss="toast" aria-label="Close" />
        </bs-div>
    </bs-toast-body>
</bs-toast>

Placement

Use a positioned wrapper with bs-toast-container placement helpers when a toast should sit in a corner or centered edge of a specific region.

Placed in the top end corner of a positioned container.

aspnet


<bs-div position="Relative" borders="All" border-rounding="All" style="min-height: 14rem;">
    <bs-toast-container toast-position="TopEnd">
        <bs-toast show="true" autohide="false">
            <bs-toast-body>Placed in the top end corner of a positioned container.</bs-toast-body>
        </bs-toast>
    </bs-toast-container>
</bs-div>

Stacked placement

When a positioned toast container has multiple children, each toast stacks within that placement region.

First toast anchored to the bottom end.

Second toast stacks above the first.

aspnet


<bs-div borders="All" border-rounding="All" position="Relative" style="min-height: 16rem;">
    <bs-toast-container toast-position="BottomEnd">
        <bs-toast show="true" autohide="false">
            <bs-toast-body>First toast anchored to the bottom end.</bs-toast-body>
        </bs-toast>
        <bs-toast show="true" autohide="false">
            <bs-toast-body>Second toast stacks above the first.</bs-toast-body>
        </bs-toast>
    </bs-toast-container>
</bs-div>

Flexbox placement

Flex utilities can place a toast within a custom region when fixed corner placement is not the desired behavior.

Centered with Bootstrap flex utilities.

aspnet


<bs-div display="Flex" justify-content="Center" align-items="Center" borders="All" border-rounding="All" style="min-height: 14rem;">
    <bs-toast show="true" autohide="false">
        <bs-toast-body>Centered with Bootstrap flex utilities.</bs-toast-body>
    </bs-toast>
</bs-div>

Accessibility

Toasts render with live-region attributes. Keep messages concise so assistive technology can announce them cleanly.
Place the live region in the page before the toast is shown. Dynamically inserting both the region and message at once may not be announced.
Use persistent toasts for actions, errors, or any message that users need time to read.
Do not put critical workflow blockers only in a toast. Pair them with page-visible validation or status when needed.

Usage

Initialize toasts with JavaScript and call show() when the notification should appear.

javascript


const toastElement = document.querySelector('#liveDocsToast');
const toast = bootstrap.Toast.getOrCreateInstance(toastElement);
toast.show();

Triggers

aspnet


<bs-button btn-style="Primary" onclick="bootstrap.Toast.getOrCreateInstance(document.getElementById('liveDocsToast')).show()">Show live toast</bs-button>
<bs-toast-container padding="Default3" position="Fixed" bottom-offset="Zero" end-offset="Zero">
<bs-toast id="liveDocsToast" autohide="false">
    <bs-toast-body>Live toast body.</bs-toast-body>
</bs-toast>
</bs-toast-container>

Options

autohide maps to data-bs-autohide. It defaults to true.
delay maps to data-bs-delay in milliseconds.
animation controls whether the fade class is emitted.
toast-position adds container positioning classes for common corners and centers.

CSS

Toast visuals come from Bootstrap's CSS variables and Sass variables. BCL helpers emit the Bootstrap toast structure and data attributes so the approved Bootstrap stylesheet remains the source of visual behavior.

Variables

Bootstrap exposes local toast CSS variables for spacing, color, background, border, radius, shadow, header color, and header background.

Sass variables

Projects that compile Bootstrap Sass can tune toast dimensions, padding, colors, opacity, border radius, and z-index before publishing the CSS bundle.

Methods

javascript


const toast = bootstrap.Toast.getOrCreateInstance('#liveDocsToast');
toast.show();
toast.hide();
toast.dispose();

Events

Show and dismiss the toast to inspect toast lifecycle events.

aspnet


<bs-button btn-style="Secondary" onclick="bootstrap.Toast.getOrCreateInstance(document.getElementById('eventDocsToast')).show()">Show event toast</bs-button>
<bs-toast-container top-margin="Default3" position="Static">
    <bs-toast id="eventDocsToast" autohide="false" on-show="console.log('toast show', event.target)" on-shown="console.log('toast shown', event.target)" on-hide="console.log('toast hide', event.target)" on-hidden="console.log('toast hidden', event.target)">
        <bs-toast-body>Show and dismiss the toast to inspect toast lifecycle events.</bs-toast-body>
    </bs-toast>
</bs-toast-container>

The on-show, on-shown, on-hide, and on-hidden attributes map to Bootstrap's show.bs.toast, shown.bs.toast, hide.bs.toast, and hidden.bs.toast lifecycle events.

Component coverage

The root <bs-toast>, <bs-toast-container>, <bs-toast-header>, and <bs-toast-body> tag helpers are dogfooded above.
Body capture is route-safe because the toast root partial preserves the composer placeholder inside the captured body wrapper.
Toast lifecycle events are Bootstrap JavaScript events exposed through toast-specific BCL on* attributes.