Bootstrap Alerts

This chapter will explain Alerts and the classes provided by Bootstrap for alert messages. Alerts provide a way to style messages to users. They offer contextual feedback for common user actions.

You can add an optional close button to alert boxes. To create an inline dismissible alert box, use the Alerts jQuery plugin.

You can add a basic alert box by creating a <div> and adding an .alert class along with one of the four contextual classes (i.e., .alert-success, .alert-info, .alert-warning, .alert-danger). The following example demonstrates this:

Example

<div class="alert alert-success">Success! Well done with the submission.</div>
<div class="alert alert-info">Info! Please note this information.</div>
<div class="alert alert-warning">Warning! Do not submit.</div>
<div class="alert alert-danger">Error! Please make some changes.</div>

The result is shown below:

Dismissible Alerts

To create a dismissible alert, follow these steps:

• Add a basic alert box by creating a <div> and adding an .alert class along with one of the four contextual classes (i.e., .alert-success, .alert-info, .alert-warning, .alert-danger).

• Additionally, add the optional .alert-dismissable to the above <div> class.

• Add a close button.

The following example demonstrates this:

Example

<div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    Success! Well done with the submission.
</div>
<div class="alert alert-info alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    Info! Please note this information.
</div>
<div class="alert alert-warning alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    Warning! Do not submit.
</div>
<div class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    Error! Please make some changes.
</div>

data-dismiss="alert" attribute to the <button> element.

The result is shown below:

Links in Alerts

To create links in alerts, follow these steps:

• Create a basic alert box by adding a <div> with an .alert class and one of the four contextual classes (.alert-success, .alert-info, .alert-warning, .alert-danger).

• Use the .alert-link utility class to quickly provide matching colored links.

Example

<div class="alert alert-success">
    <a href="#" class="alert-link">Success! Well done on submitting.</a>
</div>
<div class="alert alert-info">
    <a href="#" class="alert-link">Info! Please take note of this information.</a>
</div>
<div class="alert alert-warning">
    <a href="#" class="alert-link">Warning! Do not submit.</a>
</div>
<div class="alert alert-danger">
    <a href="#" class="alert-link">Error! Please make some changes.</a>
</div>

The result is as follows: