About Lesson
Introduction to Bootstrap 5 Toast
- .toast → Defines a toast component
- .toast-header → Creates the header section of the toast
- .toast-body → Holds the main content/message
- data-bs-delay=”time_in_milliseconds” → Sets toast duration
- data-bs-autohide=”true|false” → Enables/Disables auto-dismiss
Example: Basic Toast
JavaScript Code:
To Enable Toast Functionality in Bootstrap we need to add below JavaScript Code with each Bootstrap Toast Classes:
JavaScript
<!-- Enable Toast via JavaScript -->
<script>
document.getElementById("showToast").addEventListener("click", function () {
var toastEl = new bootstrap.Toast(document.getElementById("basicToast"));
toastEl.show();
});
</script>Bootstrap Code:
HTML
<!-- Toast Container -->
<div class="toast-container position-fixed top-0 end-0 p-3">
<div class="toast" id="basicToast" data-bs-autohide="true" data-bs-delay="3000">
<div class="toast-header">
<strong class="me-auto">Bootstrap Toast</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
This is a basic toast message!
</div>
</div>
</div>
<!-- Button to Show Toast -->
<button class="btn btn-primary" id="showToast">Show Toast</button>
Output:
Explanation:
- .toast-container → Keeps all toasts organized.
- data-bs-autohide=”true” → Auto-hides the toast after 3 seconds.
- JavaScript (new bootstrap.Toast()) → Manually triggers toast visibility.