Learn with us

In Bootstrap 5, the Toast component is used to display temporary messages or notifications to the user. Toasts are non-intrusive pop-up notifications that appear at the bottom or top of the screen. They are typically used to display brief messages or alerts that don’t require user interaction. Here’s how you can use the Toast component in Bootstrap 5:

<!-- Add a container for the toasts -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">

  <!-- Add a toast -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Toast Title</strong>
      <small>Just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Toast content goes here.
    </div>
  </div>

</div>

<!-- Initialize the toasts in JavaScript -->
<script>
  var toastElList = [].slice.call(document.querySelectorAll('.toast'))
  var toastList = toastElList.map(function (toastEl) {
    return new bootstrap.Toast(toastEl)
  })
  toastList.forEach(function (toast) {
    toast.show()
  })
</script>

In this example, a container is added to hold the toasts. Inside the container, a toast element is defined. The toast class is used to style the toast, and the toast-header and toast-body classes are used to structure the content of the toast.

To initialize the toasts, you need to include the JavaScript code shown above. This code selects all elements with the toast class and creates a new instance of the Toast class for each of them. It also calls the show() method on each toast to display them.

By default, Bootstrap will automatically handle the initialization of toasts, so you don’t need to manually initialize them unless you have a specific requirement.

You can customize the appearance and behavior of toasts by adding different classes, modifying the content and styling, or changing the position of the container. You can also use JavaScript to control the toasts programmatically, such as showing, hiding, or updating their content.

Feel free to use the Toast component to display temporary messages or notifications in your Bootstrap 5 project. For more details and additional options related to the Toast component, refer to the official Bootstrap documentation.