Bootstrap 5 Alerts
Bootstrap 5 alerts message are used to provide instant attention like warning, error, success, etc.
Steps: To create a bootstrap 5 alerts component:
-
Assign
.alerttogether withalert-*to the alert container(<div>) base class. - Please keep in mind that,
alert-*is a contextual classes that are used for background color. It has following values:.alertclass ,followed by one of the contextual classes.alert-success,.alert-info,.alert-warning,.alert-danger,.alert-primary,.alert-secondary,.alert-lightor.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}.
Example
General Syntax
General Syntax
Try it nowSource Code
Source Code : Output
Code Explanation
Note: In this example, a bootstrap basic alert has been created by assigning .alert & alert-* to the alert container base class. Please keep in mind that alert-* is an alert contextual class that is used for providing different background colors to the alert message.
General Syntax
Try it nowSource Code
Source Code : Output
Code Explanation
Note: In this example, the bootstrap alert link is created by assigning .alert-link to the hyper link element(<a>) base class.
Colored Alert Link
To create 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.
Example
General Syntax
Try it nowSource Code
Source Code : Output
Code Explanation
Note:
To create bootstrap colored alert link, you have to assign .alert & .alert-* contextual classes to the alert container and assign .alert-link to the hyperlink element (<a>) base class.
Bootstrap 5 Closing Alert
Steps to create a bootstrap 5 closing alert system:
-
Add
.alert-dismissibleto alert container i.eParent <div>. - Add
.btn-closeanddata-bs-dismiss="alert"attribute to either link(<a>) element or<button>element.
Example
General Syntax
Try it nowSource Code
Source Code : Output
Code Explanation
Note:
To create bootstrap close system, assign .alert-dismissible to the alert container.Add .btn-close to the base class of <button> or link(<a>) element.At the end, assign data attribute data-bs-dismiss="alert" to the <button> or link(<a>) 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:
Example
General Syntax
Try it nowSource Code
Source Code : Output
Code Explanation
Note: To create bootstrap 5 animated alerts, assign .fade & .show classes to the alert container that creates fading effect when closing the alert message.