Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 JS Alert

Alert CSS Classes

Alerts Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Class Description
.alert Creates an alert message box
.alert-primary Indicates an important action
.alert-secondary Indicates a less important action
.alert-success Indicate a successful or positive action
.alert-warning Indicate a warning that might need attention
.alert-danger Indicates a dangerous or potentially negative action
.alert-info Indicate a neutral informative change or action
.alert-link Used on links inside alerts to provide matching colored links
.alert-dark Indicates dark grey alert box
.alert-light Indicates light grey alert box
.alert-dismissible Indicates a closable alert box. Together with the .close class, this class is used to close the alert (adds extra padding)
.alert-heading Adds color:inherit; to the specified element
.close Styles the close button for the alert message

For a tutorial about Alerts, visit our Bootstrap 4 Alerts Tutorial.


Close Alerts Via data-* Attributes

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

Run code

Close Alerts Via JavaScript

Close an alert via JavaScript:

Run code

Alert Methods

The following table lists all available alert methods:

Method Description
$().alert() Makes an alert listen for click events on descendant elements which have the data-dismiss="alert" attribute
$().alert("close") Closes an alert by removing it from the DOM. If the .fade and .show classes are present on the element, the alert will fade out before it is removed
$().alert("dispose") Destroys an element's alert

Alert Events

The following table lists all available alert events:

Event Description Example
close.bs.alert This event fires immediately when the close instance method is called Demo
closed.bs.alert This event is fired when the alert has been closed (will wait for CSS transitions to complete) Demo