Bootstrap JS Alert
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
Bootstrap JS Alert
❮ Previous
Next ❯
JS Alert (alert.js)
The alert plugin include options and methods to close alert messages.
For a tutorial about Alerts, read our Bootstrap Alerts Tutorial.
The Alert Plugin Classes
| Class | Description | Example |
|---|---|---|
| .alert | Creates an alert message box | Try it |
| .alert-danger | Red alert. Indicates a dangerous or potentially negative action | Try it |
| .alert-dismissible | Indicates a closable alert box. Together with the .close class, this class is used to close the alert (adds extra padding) | Try it |
| .alert-info | Light-blue alert.Indicates a neutral informative change or action | Try it |
| .alert-link | Used on links inside alerts to provide matching colored links | Try it |
| .alert-success | Green alert. Indicates a successful or positive action | Try it |
| .alert-warning | Yellow alert. Indicates caution should be taken with this action | Try it |
| .close | Styles the close button for the alert message (floats right with a specified font-size, color, etc.) | Try it |
Close Alerts Via data-* Attributes
Add data-dismiss="alert" to a link or a button element to close the
alert message.
Example
<a href="#" class="close" data-dismiss="alert"
aria-label="close">×</a>
Try it Yourself »
<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
Close Alerts Via JavaScript
Close manually with:
Example
$('.close').alert();
Try it Yourself »
Alert Options
| None |
Alert Methods
The following table lists all available alert methods.
| Method | Description | Try it |
|---|---|---|
| .alert("close") | Closes the alert message | Try it |
Alert Events
The following table lists all available alert events.
| Event | Description | Try it |
|---|---|---|
| close.bs.alert | Occurs when the alert message is about to be closed | Try it |
| closed.bs.alert | Occurs when the alert message has been closed | Try it |
❮ Previous
Next ❯