→ 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

464

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

Beautiful Stats Section
App stats section with icons. with hover effect

Author:
Riz Mohammad

8 months ago

684

v.5.3
User profile card
Responsive author card

Author:
Anonymous

4 months ago

2.8k

v.5.3
Scroll Animation
Scroll Animation

Author:
Rami AlAjo

1 month ago

294

v.4.6
Success modal

Author:
Alaric Sloane

6 months ago

1.3k

v.5.3
HTML and CSS for Hero Section
Explanation: HTML: Hero Section: Uses a background image with a gradient overlay. Hero Content: Centered with a title, subtitle, and a call-to-action button. CSS: Hero Section Styling: Full viewport height with a gradient overlay for better text readability and a background image. Hero Content Styling: Centered with responsive padding and font sizes. Button Styling: Custom button colors and hover effects. Background Image: Placeholder URL: Replace 'https://via.placeholder.com/1920x1080' with the actual URL of your hero image

Author:
zobaidul kaziex

6 months ago

782

v.4.6
Clean hero section with image

Author:
Prajwal Hallale

1 year ago

947

v.5.3
Product card component using Bootstrap 5

Author:
Mateo Rojas

3 months ago

581

v.5.3
Sound Board
Sound Board

Author:
Rami AlAjo

1 month ago

213

v.4.6
Steps Section
How it works section

Author:
Ankit khedkar

8 months ago

717

v.5.3
Bento Grid with Bootstrap 5

Author:
C B

5 months ago

616

v.5.3
Expanding Search Bar - Bootstrap 5
Expand search bar on click

Author:
Andreas Müller

8 months ago

2.5k

v.5.3
Buttons with Icons

Author:
Prajwal Hallale

1 year ago

870

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent