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:

<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>

Animated Alerts

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

<div class="alert alert-success fade in">