Toasts

Basic Toast

Simple toast with header and body

Live Toast Demo

Click the button to trigger the toast

Colored Toasts
Color Variants

Toasts with different background colors

Soft Color Variants

Toasts with soft/light background colors

Custom Content
Toast with Avatar

Toasts featuring user avatars

Toast with Actions

Toasts with action buttons

Toast Placements
Placement Options

Choose where toasts appear on screen

Top Left
Top Center
Top Right
Middle Left
Center
Middle Right
Bottom Left
Bottom Center
Bottom Right
Stacking & Auto-hide
Stacked Toasts

Multiple toasts stack vertically

Auto-hide Options

Configure toast visibility duration

Toasts can be configured to auto-hide after a delay or stay visible until dismissed.

Quick notification
Default duration
Important messages
Requires manual dismiss
data-bs-autohide="false"
data-bs-delay="5000"
Real-World Examples
Notification Center

App-style notification toasts

System Status

System and status notifications

E-commerce Notifications

Shopping and order notifications

Social Notifications

Social media style notifications