# When to Use Bootstrap 5 Alerts vs. Toast Notifications

In Josh, we provide both types of notifications, and this guide helps you understand which one to choose for each requirement.

In any application, providing clear and effective user notifications is essential for a smooth user experience. Josh offers two primary ways to display messages: Bootstrap Alerts and Toast Notifications. Understanding when to use each type will improve user engagement and clarity.

# 1. Bootstrap 5 Alerts

# What Are Alerts?

Bootstrap 5 alerts are fixed messages that stay on the screen until dismissed by the user. They are useful when important information must be acknowledged.

# Best Use Cases for Alerts

Critical Actions: When a user must take an important action, such as verifying their email or completing a required step.
Form Validation Errors: If a user submits a form with missing or incorrect details, alerts provide persistent feedback.
Warnings and Errors: Messages like "Your session is about to expire" or "Payment failed" should remain visible.
Success Messages That Require Review: Example: "Your application has been submitted. Our team will review it and get back to you."

# Example Implementation in Laravel

@if(session('message'))
    <div class="alert alert-info alert-dismissible fade show" role="alert">
        {{ session('message') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

# 2. Toast Notifications

# What Are Toasts?

Toast notifications are lightweight, auto-dismissable pop-ups that provide feedback without interrupting the user’s workflow. They disappear after a short duration (e.g., 5 seconds).

# Best Use Cases for Toasts

Non-Critical Success Messages: Example: "Profile updated successfully."
Real-Time Updates: Example: "New message received."
Temporary Notifications: Example: "Your file has been uploaded."
Background Process Feedback: Example: "Export started in the background. You'll receive a download link soon."

# Example Implementation in Laravel

please check Toast notifications documentation

# 3. Choosing Between Alerts and Toasts

Scenario	Use Alert	Use Toast
User must take action	✅	❌
Critical error message	✅	❌
Form validation feedback	✅	❌
Success message that should persist	✅	❌
Quick success feedback (e.g., save)	❌	✅
Background event completion	❌	✅
Real-time updates	❌	✅

# 4. Example Use Case: Email Verification Notification

# Best Option: Bootstrap Alert

The user needs to check their inbox and confirm their email.
If a toast is used, it may disappear before they see it.
An alert remains until the user dismisses it, ensuring they take action.

<div class="alert alert-warning alert-dismissible fade show" role="alert">
    Please check your email to confirm your account.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

# Conclusion

Use Bootstrap 5 Alerts when you need a persistent message that requires acknowledgment.
Use Toast Notifications for quick, dismissible feedback that does not require user action.
Selecting the right notification type ensures better user experience and clarity in your Laravel application.