css class description

Specifies the alert window. You should add the role="alert" attribute.

You can add class collapse to hide it from user. Useful when you need to reuse an alert. In this case, you need to hide the alert, not close it.

alert-success Specifies the success alert. There are other types:
  • alert-primary - primary colors are used.
  • alert-secondary - secondary colors are used.
  • alert-danger - danger colors are used.
  • alert-warning - warning colors are used.
  • alert-info - info colors are used.
  • alert-light - light colors are used.
  • alert-dark - dark colors are used.
alert-link Provides matching colored links within any alert. Applies to the <a> element.
alert-heading Specifies the title of the alert. Applies to the element with title text.


  1. Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript.
  2. add alert-dismissible to alert
  3. add data-bs-dismiss="alert" to close button
Code example


An element with class alert has a method alert() that implements the entire API associated with alerts. You can use the corresponding jQuery show()/hide() methods to show/hide alerts.

method description
close() 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.
alert('dispose') Destroys an element’s alert.
// create an alert instance with the alert constructor
var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)



event name description Fires immediately when the close instance method is called. when the alert has been closed, it will wait for CSS transitions to complete.

auto hiding

It is easy reuse and auto hide alert with jQuery.

$("#myAlert2").fadeTo(2000, 500).slideUp(500, function(){ // optional parameter
    // Do something when the animation finishes