UI Toast | Urbix Admin & Dashboards Template

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.

Hello, world! This is a toast message.

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.

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.

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.

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.

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.

Your payment of $250 has been successfully processed.

Transaction ID: 124589.

View receipt or download PDF.

Your profile was successfully updated with the following details:

Email: john.doe@example.com

Phone: +1234567890

Review changes.

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

Manage storage or buy more space.

Suspicious login attempt detected from Los Angeles, USA.

Secure your account or review recent activity.

You have a new friend request from Emily Brown.

View profile or Accept request.

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

Urbix

Campaign_Strategy.mp4

Default Toast

Your account will be permanently deleted?

Live example

Hello, world! This is a toast message.

Color schemes

Toast Placement

Custom toast color example

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

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

Primary Color

Item Back in Stock

Donald

Birthday Reminder

Richard

Olivia liked your recent post

Mia shared a file in Marketing Campaign

Campaign_Strategy.mp4

Cart Items

Stop Watch

$318

Jeens Shoes

$399

Solder Less T-shirt

$777

Order Total:

Jaydon Levin

Toast

Default Toast

Your account will be permanently deleted?

Live example

Hello, world! This is a toast message.

Color schemes

Toast Placement

Custom toast color example

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

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

Primary Color