Bootstrap 4 JS Alert
Alert CSS Classes
For a tutorial about Alerts, read our Bootstrap Alerts Tutorial.
| 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-dark |
Dark alert. Dark grey alert box | 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-heading |
Adds color:inherit to the specified element |
Try it |
.alert-info |
Light-blue alert.Indicates a neutral informative change or action | Try it |
.alert-light |
Light alert. Light grey alert box | Try it |
.alert-link |
Used on links inside alerts to provide matching colored links | Try it |
.alert-primary |
Blue alert. Indicates an important action | Try it |
.alert-secondary |
Grey alert. Indicates a "less" important action | 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.
Close Alerts Via JavaScript
Close manually with:
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("dispose") | Destroys an element's alert. |
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 (will wait for CSS transitions to complete) | Try it |
