Bootstrap is a popular CSS framework that allows developers to quickly and easily create responsive, mobile-first web pages.
One of the useful components provided by Bootstrap is alerts, which are messages that are displayed to the user to convey information or notifications.
Types of Alerts
- Bootstrap provides four types of alerts: success, info, warning, and danger.
- The look and feel of each type of alert can be customized using CSS classes.
Success Alerts
Success alerts are used to communicate a positive message to the user, such as a successful form submission or a completed task.
To create a success alert, use the class alert-success in addition to the alert class.
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>Info Alerts
Info alerts are used to communicate neutral or informative messages to the user, such as reminders or general information.
To create an info alert, use the class alert-info in addition to the alert class.
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>Warning Alerts
Warning alerts are used to communicate important messages that require the user’s attention, such as form validation errors or potential risks.
To create a warning alert, use the class alert-warning in addition to the alert class.
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>Danger Alerts
Danger alerts are used to communicate critical messages, such as failed form submissions or system errors.
To create a danger alert, use the class alert-danger in addition to the alert class.
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>Closing Alerts
By default, alerts are dismissible, meaning that the user can close the alert by clicking a close button.
To create a dismissible alert, add a close button using the data-dismiss attribute set to alert.
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>Conclusion
Bootstrap alerts are a useful component for conveying information and notifications to the user. There are four types of alerts: success, info, warning, and danger, each with its own style.
Alerts are dismissible by default, and the close button can be added using the data-dismiss attribute.
