bootstrap_ref_js_alert

Bootstrap JS Alert

JS Alert (alert.js)

The Bootstrap alert plugin allows you to create dismissible alert messages. These can be closed by the user.

For a tutorial about Alerts, read our Bootstrap Alerts Tutorial.

The Alert Plugin Classes

Class
Description
Example (Conceptual - Refer to full Alerts tutorial for code)


.alert
Base class for creating an alert message box.
Try it


.alert-primary, .alert-secondary, .alert-success, .alert-danger, .alert-warning, .alert-info, .alert-light, .alert-dark
Contextual classes to color the alert. Example: `.alert-success` indicates a successful action.
Try it


.alert-dismissible
Required class on the alert `<div>` to enable dismissal. Must be used with a close button.
Try it


.btn-close
Used on a `<button>` element to style the close button for the alert message. It's typically placed inside an `.alert-dismissible`.
Try it

Dismiss Alerts Via data-bs-dismiss Attribute

Add data-bs-dismiss="alert" to a <button> element (typically with class .btn-close) to enable closing the alert message. Make sure the alert itself has the .alert-dismissible class.

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  **Holy guacamole!** You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

The fade and show classes provide a fading animation when the alert is dismissed.

Dismiss Alerts Via JavaScript

You can also close an alert programmatically using JavaScript:

// Get the alert element
var alertElement = document.getElementById('myAlert');

// Create a Bootstrap Alert instance
var bsAlert = new bootstrap.Alert(alertElement);

// Close the alert
bsAlert.close();

// Example HTML for the alert:
// <div class="alert alert-warning alert-dismissible fade show" id="myAlert" role="alert">
//   Your alert message.
//   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
// </div>

Make sure your alert element has an id (e.g., myAlert) to easily target it with JavaScript.

Alert Options

Bootstrap 5 alerts primarily rely on classes and data attributes for configuration. There are no specific JavaScript options passed during instantiation for basic functionality.

Alert Methods

The following table lists available alert methods.

Method
Description
Example


`close()`
Closes the alert message.
`var bsAlert = new bootstrap.Alert(myAlertEl); bsAlert.close();`


`dispose()`
Destroys an alert instance, removing event listeners and data.
`var bsAlert = new bootstrap.Alert(myAlertEl); bsAlert.dispose();`


`getInstance(element)`
Static method to get the alert instance associated with a DOM element.
`var instance = bootstrap.Alert.getInstance(myAlertEl);`


`getOrCreateInstance(element, [config])`
Static method to get an alert instance or create a new one if it doesn't exist.
`var instance = bootstrap.Alert.getOrCreateInstance(myAlertEl);`

Alert Events

The following table lists all available alert events. These events are triggered on the alert element itself.

Event
Description
How to listen


`close.bs.alert`
This event fires immediately when the `close` instance method is called.
`myAlertEl.addEventListener('close.bs.alert', function () { /* your code */ });`


`closed.bs.alert`
This event is fired when the alert has been closed (will wait for CSS transitions to complete).
`myAlertEl.addEventListener('closed.bs.alert', function () { /* your code */ });`