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: successinfowarning, 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!

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!

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!

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!

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>


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.

Related Posts: