Bootstrap - Alerts

In this tutorial we will learn about alerts in Bootstrap.

Alerts are used to provide feedback based on user actions. So we can prompt a success alert on success or an info alert to the user to inform about something.

Creating alerts

To create an alert we use the .alert class. Then we add the following class to style the alerts.

• .alert-success for success
• .alert-info for info
• .alert-danger for danger
• .alert-warning for warning

<!-- success alert -->
<div class="alert alert-success">
  <p>This is a success alert.</p>
</div>

<!-- info alert -->
<div class="alert alert-info">
  <p>This is an info alert.</p>
</div>

<!-- danger alert -->
<div class="alert alert-danger">
  <p>This is a danger alert.</p>
</div>

<!-- warning alert -->
<div class="alert alert-warning">
  <p>This is a warning alert.</p>
</div>

Output:

Dismissible alerts

We can even create a dismissible alert by adding an optional .alert-dismissible class and a close button.

Requires JavaScript alert plugin.

<!-- success alert -->
<div class="alert alert-success alert-dismissible">
  <button type="button"
          class="close"
          data-dismiss="alert"
          aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <p>This is a success alert.</p>
</div>

Output:

Alerts with links

We can even include links inside an alert using the anchor tag and adding the .alert-link class.

<div class="alert alert-success" role="alert">
  <p><a href="#" class="alert-link">Click here</a> to continue.</p>
</div>

Output: