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.

Usage

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:

Example

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

Options

No options

Methods

The following are some useful methods for alert plugin:

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

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

Example

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

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

Events

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

Event	Description
close.bs.alert	This event fires immediately when the close instance method is called. $('#my-alert').bind('close.bs.alert', function () { // do something… }) 1 2 3 $('#my-alert').bind('close.bs.alert', function () {   // do something… })
closed.bs.alert	This event is fired when the alert has been closed (will wait for CSS transitions to complete). $('#my-alert').bind('closed.bs.alert', function () { // do something… }) 1 2 3 $('#my-alert').bind('closed.bs.alert', function () {   // do something… })

Example

This example shows the alert plugin events: