Latest web development tutorials
 

Bootstrap Alerts


Alerts

Bootstrap provides an easy way to create predefined alert messages:

× Success! This alert box indicates a successful or positive action.
× Info! This alert box indicates a neutral informative change or action.
× Warning! This alert box indicates a warning that might need attention.
× Danger! This alert box indicates a dangerous or potentially negative action.

Alerts are created with the .alert class, followed by one of the four contextual classes .alert-success, .alert-info, .alert-warning or .alert-danger:

Example

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert alert-info">
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert alert-warning">
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
Try it Yourself »

Closing Alerts

To close the alert message, add class="close" and data-dismiss="alert" to a link or a button element:

Example

<div class="alert alert-success">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>
Try it Yourself »

The aria-* attribute and &times; explanation

To help improve accessibility for people using screen readers, you should include the aria-label="close" attribute, when creating a close button.

&times; (×) is an HTML entity that is the preferred icon for close buttons, rather than the letter "x".


Animated Alerts

The .fade and .in classes adds a fading effect when closing the alert message:

Example

<div class="alert alert-success fade in">
Try it Yourself »

Test Yourself with Exercises!

Exercise 1 »  Exercise 2 »  Exercise 3 »


Complete Bootstrap Alert Reference

For a complete reference of all alert options, methods and events, go to our Bootstrap JS Alert Reference.