About Lesson
Toast with Different Triggers
- data-bs-delay=”5000″ → Sets delay before auto-dismiss
- data-bs-autohide=”false” → Prevents toast from automatically closing
- onclick=”showToast()” → Calls a function to trigger toast
1. Auto-hide Toast
HTML
<!-- Auto-hide Toast -->
<div class="toast-container position-fixed top-50 start-50 translate-middle">
<div class="toast" id="autoToast" data-bs-autohide="true" data-bs-delay="5000">
<div class="toast-header">
<strong class="me-auto">Auto-hide Toast</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
This toast will disappear in 5 seconds.
</div>
</div>
</div>
<button class="btn btn-warning" onclick="showToast('autoToast')">Show Auto-Hide Toast</button>
2. Manual Dismiss Toast
HTML
<div class="toast-container position-fixed top-50 start-50 translate-middle">
<div class="toast" id="manualToast" data-bs-autohide="false">
<div class="toast-header">
<strong class="me-auto">Manual Dismiss Toast</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
Click the "X" button to dismiss this toast.
</div>
</div>
</div>
<button class="btn btn-danger" onclick="showToast('manualToast')">Show Manual Dismiss Toast</button>Explanation:
- The auto-hide toast disappears after 5 seconds.
- The manual-dismiss toast stays visible until closed manually.
- showToast(‘toastID’) function handles toast visibility.