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

Add data-dismiss="alert" to a link or a button element to close the alert message.

Close manually with:

$('.close').alert("close");

None

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.

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

Track your progress - it's free!