Bootstrap 5 TutorialLesson 28Free preview
BS5 Toast
This lesson is part of Bootstrap · All levels
Summary
Toast is a small notification that appears in the corner of the screen to give short feedback, usually automatically disappearing after a few seconds. The .toast element is wrapped with .toast-container containing the icon, time, and shut button, as well as .toast-body for the message. Toast is enabled via JavaScript with autohide and delay options. (.toast-header)
Key points
- .toast is the notification element and .toast-container hosts some toasts.
- .toast-header contains the title, time, and button .btn-close.
- For the message. (.toast-body)
- Toast is displayed with new bootstrap.Toast(el) .show().
- The auto-hide and delay options set the automatic deletion.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.