Bootstrap Alerts
Bootstrap alerts are used to provide instant attention, like warnings, errors, etc.
Example
Steps: To create a Bootstrap 5 alerts component:
-
Assign the
.alertclass together with.alert-*class to the alert container (<div>) element base class. -
Please keep in mind that, the
.alert-*is a contextual class that is used for background color. It has the 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.
Note: * specifies one of from the following options:
{primary| secondary| success| danger| bg-warning| bg-info| bg-light| bg-dark}.
Source Code
<div class="container mt-5-">
<div class="alert alert-primary" role="alert">
primary alert
</div>
<div class="alert alert-secondary" role="alert">
secondary alert
</div>
</div>
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
<div class="alert alert-*">
<a href="#" class="alert-link">Alert Link </a>
</div>
Source Code
<div class="container mt-5-">
<div class="alert alert-primary" role="alert">Simple primary alert with
<a href="https://sudhakarinfotech.com" class="alert-link" target="_blank">Link 1 </a>.
Click to see the result.
</div>
<div class="alert alert-secondary mt-5" role="alert">Simple secondary alert with
<a href="https://sudhakarinfotech.com/shop" class="alert-link" target="_blank"> Link2</a>
Click to see the result.
</div>
</div>
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 a Bootstrap 5 colored alert link, you have to apply an alert-link class to any hyperlink(<a>) element base class and add one of the contextual classes .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
Source Code
<div class="container mt-5-">
<div class="alert alert-success"><strong>Success!</strong>
You can get <a href="#" class="alert-link">your score result.</a>.
</div>
<div class="alert alert-warning"><strong>Success!</strong>
You can get <a href="#" class="alert-link">your score result.</a>.
</div>
</div>
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-dismissibleclass to the alert container i.e.Parent <div>. - Add
.btn-closeanddata-bs-dismiss=“alert”attribute to either link(<a>) element or<button>element.
Example
General Syntax
<div class="alert alert-success alert-dismissible" role="alert">
Closing Alert
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
Source Code
<div class="container mt-5-">
<div class="alert alert-success alert-dismissible" role="alert">
<strong>Success!!</strong> Your message is successfully submitted.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
Code Explanation
Note:
To create Bootstrap close system, assign .alert-dismissible class to the alert container & add .btn-close to the base class of <button> or link (<a>) element. In the end, assign the data attribute data-bs-dismiss=“alert” to the <button> or link (<a>) element.
Alert 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
Source Code
<div class="container mt-4">
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Success!</strong> Your message is received now.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
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.
Web Tutorials
