Bootstrap Alerts & Its Uses

Bootstrap 5 Alerts

Bootstrap alerts message are used to provide instant attention like warnings, errors, successes, etc.

Steps: To create a bootstrap 5 alerts component:

• Assign .alert together with alert-* to the alert container(<div>) base class.
• Please keep in mind that,alert-* is a contextual class that is used for background color. It has the following values:.alert class, followed by one of the contextual classes .alert-success,.alert-info,.alert-warning,.alert-danger,.alert-primary,.alert-secondary,.alert-light or .alert-dark.

General Syntax For Alert

<span class="alert alert-*">Alert</span>

Note:* Notify one of {primary|secondary|success|danger|bg-warning|bg-info|bg-light|bg-dark}.

General Syntax

<div class="alert alert-*" ></div>

Bootstrap 5 Alerts Link

To create a bootstrap 5 alerts link, you have to apply .alert-link class to the <a> element base class.

General Syntax

<div class="alert alert-*">
  <a href="#" class="alert-link">Alert Link </a>
</div>

Colored Alert Link

To create a bootstrap 5 colored alert link, you have to apply alert-link class to any hyperlink(<a>)element base class and add one of the contextual class .alert-success,.alert-info,.alert-warning, .alert-danger,.alert-primary,.alert-secondary,.alert-light or .alert-dark to alert container (i.e parent div) class.

General Syntax

<div class="alert alert-*"></div>

Bootstrap 5 Closing Alert

Steps to create a bootstrap 5 closing alert system:

• Add .alert-dismissible to alert container i.e Parent <div>.
• Add .btn-close and data-bs-dismiss="alert" attribute to either link(<a>) element or <button> element.

Bootstrap 5 Alerts Animation

Bootstrap 5 animated alerts can be created by applying .fade and .show classes to the alert container that creates fading effect when closing the alert message:

General Syntax

<div class="alert alert-success alert-dismissible fade show" ></div>

To read more about it,Bootstrap alerts, click here.