Alerts

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

Note

Accessibility

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>
</button>

Note

Closing an alert will remove it from the DOM. Use the <button> element with it for proper behavior across all devices.

Animating

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

Alert using JavaScript

Triggers

Enable dismissal of an alert via JavaScript as shown below.

$('.alert').alert()

Methods

Method	Description
$().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.

$(".alert").alert('close')

Events

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

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

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})