In Bootstrap 5, the Toast component is used to display non-intrusive notifications or messages to the user. Toasts are typically displayed in a small, floating box that appears at the top or bottom of the screen. They provide a simple and unobtrusive way to show temporary messages or alerts. Here's an example of how to create a basic toast in Bootstrap 5:

html
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true" data-bs-delay="3000">
    <div class="toast-header">
        <strong class="me-auto">Toast Heading</strong>
        <small>Just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
        This is the content of the toast.
    </div>
</div>

<script>
    var toastEl = document.querySelector('.toast')
    var toast = new bootstrap.Toast(toastEl)
    toast.show()
</script>

In this example, we have a `<div>` element with the class `toast` that represents the toast component. The `role="alert"` attribute helps screen readers identify the toast as an alert. The `aria-live="assertive"` attribute announces the toast immediately to the user, and the `aria-atomic="true"` attribute ensures that the entire toast is announced when it appears.

Inside the toast, we have the `<div>` element with the class `toast-header`, which contains the heading and close button of the toast. The heading is represented by the `<strong>` element with the class `me-auto`, which ensures it's aligned to the left. The timestamp or additional information can be placed in a `<small>` element. The close button is created using the `<button>` element with the class `btn-close` and the `data-bs-dismiss="toast"` attribute to dismiss the toast when clicked.

The actual content of the toast is placed within the `<div>` element with the class `toast-body`.

To display the toast, JavaScript is used. The `script` section at the bottom of the code selects the toast element using `document.querySelector()`, creates a new `Toast` object with the selected element, and then calls the `show()` method to display the toast.

Make sure to include the Bootstrap JavaScript file (`bootstrap.js` or `bootstrap.min.js`) in your HTML document for the toast to work properly.

You can customize the appearance and behavior of the toast by adding additional classes, using JavaScript to handle events and add dynamic functionality, or modifying the toast's styles.

Bootstrap 5 also provides options for different positions, transitions, and other toast features. You can refer to the Bootstrap documentation for more details and examples on working with toasts in Bootstrap 5.

About the Author

Silan Software

Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.

We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc