Bootstrap 5 Toasts Stacking

Bootstrap 5 Toasts Stacking feature is used to wrap multiple toasts in a toast container which will increase the vertical spacing.

Toasts Stacking Classes: No special classes are used in Toasts Stacking, you just need to have knowledge of Bootstrap 5 Toasts.

Syntax:

<div class="toast-container">
 <div class="toast">
 <div class="toast-header">...</div>
 <div class="toast-body">...</div>
 </div>
 ...
</div>

Example 1: The following code demonstrates the Toasts Stacking feature using the Toasts Stacking Bootstrap 5 properties.

Output:

👁 Image

Example 2:  The following code demonstrates the Toasts Stacking feature with logo and small text using the Toasts Stacking Bootstrap 5 properties.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.1/components/toasts/#stacking