Bootstrap 5 Toasts Translucent

Bootstrap 5 provides the 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 translucent feature is used to be slightly translucent to blend in with the content below them.

Toasts Translucent Classes:

• toast: This class is used to create a toast notification in Bootstrap.
• toast-header: This class is used to specify the header of the toast.
• toast-body: This class is used to specify the body of the toast.

 

Syntax:

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

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

Output:

👁 Image

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

Output:

👁 Image

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