Bootstrap 5 Toasts Placement

Bootstrap 5 Toasts which are used to show the alert notifications. Toasts are brief alerts designed to resemble the push notifications made popular by mobile and desktop operating systems. The Toast Placement feature is used to set the position of the toast on the web page.

Bootstrap 5 Toasts Placement Class:

• position-absolute: This class is used to position the element relative to its closest positioned ancestor.
• top-*: This attribute set the position of the top alignment of the toast. 
• bottom-*: This attribute set the position of the bottom alignment of the toast. 
• start-*: This attribute set the position of the start alignment of the toast. 
• end-*: This attribute set the position of the end alignment of the toast. 

Syntax: The * can be any value from 0 to 50.

<div class="toast-container position-absolute top|bottom|start|end-*">
 <div class="toast">
 <div class="toast-header">
 ...
 </div>
 <div class="toast-body">
 ... 
 </div>
 </div>
</div>

Example 1: The following code demonstrates the Toasts Placement feature and set the position of Toast at the top left, top center, and top right of the web page using the Toasts Placement Bootstrap 5 properties. 

Output:

👁 Image

Example 2:  The following code demonstrates the Toasts Placement feature and set the position of Toast at the middle left, middle center, and middle right of the web page using the Toasts Placement Bootstrap 5 properties. 

Output:

👁 Image

Example 3: The following code demonstrates the Toasts Placement feature and set the position of Toast at the bottom left, bottom center, and bottom right of the web page using the Toasts Placement Bootstrap 5 properties. 

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/components/toasts/#placement