Bootstrap Alert Plugin

You can add dismiss functionality to all alert messages using alert message plugin. As you know alert messages are frequently used to show information just like confirmation or warning messages to the user end. We will cover that how to work bootstrap alert plugin in this tutorial.

If you want to implement functionality of this plugin individually, simple include the alert.js file along the other JS files. Else as we have discussed in the tutorial of Bootstrap Plugin Overview, you can include bootstrap.jsor the minified bootstrap.min.js.


Using these two methods you can enable dismissal of an alert:

Via data attributes

Add data-dismiss=”alert” to your close button to automatically give an alert close functionality to dismiss via Data API.

Via JavaScript

Use the following line of code to dismiss via JavaScript:


This example shows the use of alert plugin via data attributes.


No options


The following are some useful methods for alert plugin:

Method Description
.alert() This method wraps all alerts with close functionality.
Close Method .alert(‘close’) To enable all alerts to be closed, add this method.

To enable alerts to animate out when closed, make sure they have the .fade and .in class already applied to them.


This example code shows use of .alert() method:

This example demonstrates use of .alert(‘close’) method:


Bootstrap’s alert class exposes a few events for hooking into alert functionality.

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


This example shows the alert plugin events:

Leave a Reply

Your email address will not be published. Required fields are marked *