UI Toast | FabKin Admin & Dashboards Template

Toast

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.

Campaign_Strategy.mp4

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?"

Theme Customization

Layout

Vertical

Horizontal

Semi Box

Content Width:

Default

Box

Layout Direction:

RTL

LTR

Layout Mode:

Light

Dark

System

Sidebar Size:

Default

Icon

Sidebar Color:

Light

Dark

Primary Color

Ready to Begin Your Journey?

Ready to Begin Your Journey?

Item Back in Stock

Good news! The item you wanted is back in stock. Grab it before it’s gone again!

Donald liked your post

Birthday Reminder

Don’t forget! It’s Emily birthday tomorrow. Send them a message!

Richard followed you

Daniel invited you to join Website Redesign

Olivia liked your recent post

Mia shared a file in Marketing Campaign

Campaign_Strategy.mp4

Cart Items

Branded Crop Top

$499

Stop Watch

$318

Jeens Shoes

$2394

Solder Less T-shirt

$777

Mens T-shirt

$598

Paul Danielle

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?"

Theme Customization

Layout

Vertical

Horizontal

Semi Box

Content Width:

Default

Box

Layout Direction:

RTL

LTR

Layout Mode:

Light

Dark

System

Sidebar Size:

Default

Icon

Sidebar Color:

Light

Dark

Primary Color