Bootstrap Alerts

Introduction

Alerts are used to notify users about important messages. Bootstrap provides different styles for alerts based on their context.

Important Tip:

Use alert-dismissible along with JavaScript for better control over alerts.

Types of Alerts

<div class="alert alert-success">Success! This is a success alert.</div>
<div class="alert alert-info">Info! This is an info alert.</div>
<div class="alert alert-warning">Warning! This is a warning alert.</div>
<div class="alert alert-danger">Danger! This is a danger alert.</div>

Output:

Alert Links

You can add links inside alerts by using .alert-link class:

<div class="alert alert-success">
  Success! <a href="#" class="alert-link">Click here</a> to learn more.
</div>

Closing Alerts

Alerts can be dismissed using the alert-dismissible class and a close button:

<div class="alert alert-warning alert-dismissible">
  <button type="button" class="close" data-dismiss="alert">×</button>
  Warning! You can close this alert.
</div>

Output:

Animated Alerts

You can make alerts fade out using the fade and show classes:

<div class="alert alert-danger alert-dismissible fade show">
  <button type="button" class="close" data-dismiss="alert">×</button>
  This is an animated alert.
</div>

Output:

Request more information

Bootstrap Alerts