Toasts

Basic Example

A standard toast notification featuring an icon, title, timestamp, and dismissible button. This example demonstrates the basic structure and essential elements of a toast message.

Live Demonstration

Click the button below to trigger a toast notification. This interactive example shows how toasts can be programmatically displayed in response to user actions.

Translucent Toast

A semi-transparent toast that blends with the background while maintaining readability. Perfect for creating a subtle notification that doesn't overwhelm the interface.

Stacking Toasts

Multiple toasts can be stacked in a container, automatically arranging themselves vertically. This pattern is useful when multiple notifications need to be displayed simultaneously.

Custom Toasts

Simplified toast variant with minimal styling, perfect for quick status updates or simple messages.

Interactive toast with action buttons, ideal for prompting user decisions or responses.

Color Schemes

Toasts can be styled with different background colors to indicate various message types or importance levels. Use utility classes like text-bg-primary, text-bg-success, or text-bg-danger to create contextual notifications.

Toast Placement

Toasts can be positioned anywhere on the screen using Bootstrap's position utilities. Common placements include top-right, bottom-right, or center of the viewport.

Center-aligned toast using Flexbox utilities, useful for important messages that need to capture the user's attention.