→ Ankit khedkar
→ Simple toast messages example

Simple toast messages example

Four different types of toasts:

Success (green)
Error (red)
Warning (yellow)
Info (blue)

Auto-dismisses after 3 seconds

This bootstrap css example is contributed by Ankit khedkar, on 20-Dec-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are Toast, Snackbar

Tags: Notification

Author Ankit khedkar

1.4k

v.5.3

Fork Fullscreen

<div class="p-4">
    
    <div class="mb-3">
        <button class="btn btn-success me-2" onclick="showToast('success')">Success Toast</button>
        <button class="btn btn-danger me-2" onclick="showToast('error')">Error Toast</button>
        <button class="btn btn-warning me-2" onclick="showToast('warning')">Warning Toast</button>
        <button class="btn btn-info" onclick="showToast('info')">Info Toast</button>
    </div>

<div class="toast-container position-fixed top-0 end-0 p-3">
        
        <div id="successToast" class="toast align-items-center text-white bg-success border-0" role="alert"
            aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                    Operation completed successfully!
                </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 id="errorToast" class="toast align-items-center text-white bg-danger border-0" role="alert"
            aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                    An error occurred. Please try again.
                </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 id="warningToast" class="toast align-items-center text-dark bg-warning border-0" role="alert"
            aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                    Warning: Please check your input.
                </div>
                <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>

<div id="infoToast" class="toast align-items-center text-dark bg-info border-0" role="alert"
            aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                    Here's some information for you.
                </div>
                <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    </div>

More Examples

Product Card Component
Minimal Product Card

Author:
Juniper

10 months ago

1.2k

v.5.3
Minimal shopping cart

Author:
Valeria González

9 months ago

1.8k

v.5.3
Floating Card-Style Pagination

Author:
Levi Treadwell

8 months ago

1.7k

v.5.3
Horizontal Steps (Interactive)
Stepper component with Navigation buttons

Author:
Aisha Bello

8 months ago

4.6k

v.5.3
Search with Select using Bootstrap 5
Category filter with search bar

Author:
Omar Khaled

11 months ago

3.8k

v.5.3
Beautiful Bootstrap Accordion

Author:
Alaric Sloane

10 months ago

3.6k

v.5.3
Accordion FAQ section
Minimal and with beautiful animation

Author:
Ankit khedkar

1 year ago

6.9k

v.5.3
Pricing Cards with Hover Effects
Clean and elegant pricing comparison component with Bootstrap 5.3

Author:
Isaac Winslow

9 months ago

975

v.5.3
Responsive image galary with tabs

Author:
Arturo

8 months ago

4.7k

v.5.3
Hidden Search Widget
Hidden Search Widget

Author:
Rami AlAjo

6 months ago

919

v.4.6
404 page template

Author:
Valeria González

1 year ago

18.1k

v.5.3
Notification alert
notification alert bootstrapt 5.3 # alert-imessage Alert message custom on bootstrap 5.3 # Example calls JS // imessage.show("Default Success!", "success"); // imessage.show("Top Center Message!", "info", "top-center"); // imessage.show("Bottom Right Warning!", "warning", "bottom-right"); // imessage.show("Bottom Left Error!", "fail", "bottom-left"); // imessage.show("Centered Notification!", "info", "center");

Author:
StarCode Kh

5 months ago

1.5k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent