Bootstrap Alerts

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">&times;</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.

Bootstrap Basics