##### Default Toast

Use Bootstrap's default toast to display notifications with `.toast` class. To show a toast, add the `.show` class and use JavaScript for automatic dismissal.

11 min ago
Hello, world! This is a toast message.
11 min ago

##### Your account will be permanently deleted?

Do you intend to continue?

    <div class="toast show mb-4" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <img src="assets/images/logo-dark.png" class="me-auto" height="20" alt="...">
            <small class="text-muted">11 min 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>
    <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <img src="assets/images/logo-dark.png" class="me-auto" height="20" alt="...">
            <small class="text-muted">11 min ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            <h5 class="mb-1 fs-15">Your account will be permanently deleted?</h5>
            <p class="mb-0">Do you intend to continue?</p>
            <div class="mt-3 pt-3 border-top d-flex gap-2">
                <button class="btn btn-dark btn-sm" type="button">I'm not sure</button>
                <button class="btn btn-danger btn-sm" type="button" data-bs-dismiss="toast">Remove My Account</button>
            </div>
        </div>
    </div>

##### Live example

Check out the live example of a Bootstrap toast by adding a `<div class="toast">` with `.toast` class to your page. Use JavaScript to show or hide the toast and customize its content as needed.

11 min ago

###### Hello, world! This is a toast message.

    <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <img src="assets/images/logo-dark.png" class="me-auto" height="20" alt="...">
                <small class="text-muted">11 min ago</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                <h6 class="mb-0">Hello, world! This is a toast message.</h6>
            </div>
        </div>
    </div>

##### Color schemes

Apply color schemes to Bootstrap toasts using classes like `.bg-success` or `.bg-danger`. These classes change the toast's background color to match different themes, such as success or error.

Hello, world! This is the Primary toast message.
Hello, world! This is the Secondary toast message.
Hello, world! This is the Success toast message.
Hello, world! This is the Info toast message.
Hello, world! This is the warning toast message.
Hello, world! This is the danger toast message.
Hello, world! This is the light toast message.
Hello, world! This is the dark toast message.

    <div class="toast show align-items-center text-white text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">
                Hello, world! This is the Primary toast message.
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>
    <div class="toast show align-items-center text-white text-bg-secondary border-0 mt-3" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">
                Hello, world! This is the Secondary toast message.
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>
    <div class="toast show align-items-center text-white text-bg-success border-0 mt-3" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">
                Hello, world! This is the Success toast message.
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>
    <div class="toast show align-items-center text-white text-bg-info border-0 mt-3" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">
                Hello, world! This is the Info toast message.
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>
    <div class="toast show align-items-center text-white text-bg-warning border-0 mt-3" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">
                Hello, world! This is the warning toast message.
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>
    <div class="toast show align-items-center text-white text-bg-danger border-0 mt-3" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">
                Hello, world! This is the danger toast message.
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>
    <div class="toast show align-items-center text-bg-light border-0 mt-3" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">
                Hello, world! This is the light toast message.
            </div>
            <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>
    <div class="toast show align-items-center text-white text-bg-dark border-0 mt-3" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">
                Hello, world! This is the dark toast message.
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>

##### Toast Placement

Set toast placement in Bootstrap using classes like `.top-0 .start-50` or `.bottom-0 .end-0`. These classes position the toast in different corners of the screen.

Toast placement
11 min ago
Hello, world! This is a toast message.

##### Custom toast color example

Customize toast colors in Bootstrap by applying classes like `.bg-primary` or `.text-light` to the `<div class="toast">`. This allows you to set custom background and text colors for your toasts.

New Message Just Now

You've got a new message from Jane:

###### "Hi, can we change the time for our meeting?"

Respond now or visit your inbox for further information.

System Update Just Now

Your software has been successfully updated to version 2.5.2.

New Features:

- Enhanced startup performance
- Resolved bugs and improved user interface

Check the complete changelog.
Payment Successful Just Now

Your payment of $250 has been successfully processed.

Transaction ID: 124589.

View receipt or download PDF.
Profile Updated 2 hours ago

Your profile was successfully updated with the following details:

Email: john.doe@example.com

Phone: +1234567890

Review changes.
Low Storage 45 min ago

Your device is running low on storage (2GB left).

Manage storage or buy more space.
Security Alert 30 min ago

Suspicious login attempt detected from Los Angeles, USA.

Secure your account or review recent activity.

Friend Request 1 hour ago

You have a new friend request from Emily Brown.

View profile or Accept request.

Night Mode 2 min ago
Night Mode has been activated. Enjoy a more comfortable browsing experience in low-light settings.

Theme Customization

###### Layout:

##### Vertical

##### Horizontal

##### Semi Box

###### Content Width:

##### Default

##### Box

###### Layout Direction:

##### LTR

##### RTL

###### Layout Mode:

##### Light

##### Dark

##### System

###### Sidebar Size:

##### Default

##### Medium

##### Icon

##### Icon hover

###### Sidebar Color:

##### Light

##### Dark