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.

Example

<a href="#" class="close" data-dismiss="alert">&times;</a>
Try it Yourself »

Close Alerts Via JavaScript

Close manually with:

Example

$('.close').alert("close");
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("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

Copyright 1999-2023 by Refsnes Data. All Rights Reserved.