Alerts can be used for displaying messages for the user. Based on user actions like form submit you can use alerts to display success for failure messages.

How to Use
Add the alert class followed by the any of the available below eight classes.
  • alert-primary
  • alert-secondary
  • alert-success
  • alert-danger
  • alert-warning
  • alert-info
  • alert-light
  • alert-dark


Using color only provides a visual indication. To support assistive technologies – such as screen readers you can give additional text hidden with the .sr-only class and convey the color to non-visual users.

Link color
Use the .alert-link class for matching the link colors with the alert text color.
Additional content
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
Dismissing/Closing Alert

You can close the alert message by clicking the close/ dismiss button.

  • Load the alert plugin, or the compiled Bootstrap JavaScript.
  • Add .alert-dismissible class in additional to the alert class which adds extra padding to the right of the alert and positions the .close button.
  • Add a <button> element inside with class .close and data-dismiss="alert" attribute, which triggers the JavaScript functionality.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
Closing an alert will remove it from the DOM. Use the <button> element with it for proper behavior across all devices.

You can animate alerts when closing the alert. Add the .fade and .show classes.

Alert using JavaScript

Enable dismissal of an alert via JavaScript as shown below.

$().alert()Makes an alert listen for click events on descendant elements which have the data-dismiss="alert" attribute. (Not necessary when using the data-api’s auto-initialization.)
$().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.

Bootstrap’s alert plugin have few events for hooking into alert functionality.

EventDescription event fires immediately when the close instance method is called. event is fired when the alert has been closed (will wait for CSS transitions to complete).
$('#myAlert').on('', function () {
  // do something…
Related Tutorial
Follow Us #
Contents +