Bootstrap tutorial

Alerts

css class description
alert

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.

Optionally, you can add a close button as in example below.

<div class="alert alert-success collapse" id="myAlert1" role="alert">
  <h4 class="alert-heading">Well done! 
  <button type="button" 
      class="close" 
      data-dismiss="alert" 
      aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button></h4>
  <p>Aww yeah, you successfully read this important alert message. 
  This example text is going to run a bit longer 
  so that you can see how spacing within 
  an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, 
  be sure to use margin utilities 
  to keep things nice and tidy.</p>
</div>

methods

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

events

event name description
close.bs.alert Fires immediately when the close instance method is called.
closed.bs.alertFires 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
});