Javatpoint Logo
Javatpoint Logo

Bootstrap 5 Toasts

Bootstrap 5 Toasts are brief alerts created to resemble the push notifications made popular by desktop and mobile operating systems. They are made with flexbox, making it simple to align and place them.
Toast is a simple, customizable alert message that sends push notifications to your visitors. When a user clicks a button or submits a form, the toast component, which resembles an alert box, is briefly displayed.

Basic Toasts

The "toast" class uses to display the function with the required message or information. The basic toast function needs the "show" class to display the function by default.

Syntax

The following syntax shows us basic bootstrap 5 toast on the web page.

Example

The following example shows the basic bootstrap 5 toast on the web page. It contains basic content or extra message to the user.

Output

The following output image shows the toast function with information.

Bootstrap 5 Toasts

Header and content of Toasts

The "toast-header" shows the heading of the toast function inside the "toast" element. The "toast-content" contains extra content and information in the toast box.

Syntax

The following syntax shows us the bootstrap 5 toast function with header and toast body.

Example

The following example shows the bootstrap 5 toast function with header and toast body. The heading and core data show inside of the toast function.

Output

The following output image shows the toast function with header and toast body.

Bootstrap 5 Toasts

Toast function with close button

The button uses the data-bs-dismiss = "toast" element inside the tag. If we click the button, the toast function closes the box and shows the original page. The close button works inside of the toast heading element.

Syntax

The following syntax shows us the bootstrap 5 toast function with a close button.

Example

The following example shows the bootstrap 5 toast function with a close button.

Output

The following output image shows the toast function with the close button.

Bootstrap 5 Toasts

Toast function with button

The toast function hides by default on the web page. If we click the button, the toast function displays using the script function. Here, the script tag uses the toast() method using button id and toast tag.

Syntax

The following syntax shows us the bootstrap 5 toast function with a close button.

The following syntax for toast functions with a script tag.

Example

The following example shows the bootstrap 5 toast function with a close button.

Output

The following output image shows the toast function with the button.

Bootstrap 5 Toasts

Toasts Function with Container

The toast container provides space vertically using the "toast-container" class. The container class contains a toast class with header and body content.

Syntax

The following syntax shows us the bootstrap 5 toast function with the container.

Example

The following example shows the bootstrap 5 toast function with the container.

Output

The following output image shows the toast function with the container.

Bootstrap 5 Toasts

Contextual Toasts Function

The "bg-*" class works to create a contextual toast function. The toast function provides different background colors as per user requirements. The "bg-*" with primary, secondary, info, warning, success, danger, and dark is used to show colors and provide particular meaning for function.

Syntax

The following syntax shows us the bootstrap 5 contextual toast function.

Example

The following example shows the bootstrap 5 contextual toast function.

Output

The following output image shows the contextual toast function.

Bootstrap 5 Toasts

Contextual Toasts Container

The toast container provides different background colors and the meaning of function. The "bg-*" with primary, secondary, info, warning, success, danger, and the dark class uses to show different background colors for function.

Syntax

The following syntax shows us bootstrap 5 contextual toast container.

Example

The following example shows the bootstrap 5 contextual toast container.

Output

The following output image shows a contextual toast container.

Bootstrap 5 Toasts

Conclusion

The toast function displays a message or user information like the flexbox function. It is another function for the popup box function to display essential information.


Next Topic#





Youtube For Videos Join Our Youtube Channel: Join Now

Feedback


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA