Bootstrap Alert Plugin

Alert plugins are used to display warning or confirmation messages.

The alert plugin can be added into bootstrap individually by including the alert.js files. Alert plugin can also be added all at once when we use bootstrap.js files.


Usage:

The dismissal of alert can be enabled by using one of the following methods:


By using data attributes:

Alert plugin can be dismissed by using data-dismiss = “alert” inside close button.

The following example demonstrates this:

CODE:

< a class = “close” data- dismiss = “alert” href = “#” aria- hidden = “true” >

&times;

</ a >


By using JavaScript:

The following code of JavaScript can be used to enable dismissal:

CODE:

$(“.alert”).alert ()


Example:

Consider the following example in which alert plugin is used through data attributes:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< meta charset = “utf- 8” >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

<div class = “alert alert-warning”>

<a href = “#” class = “close” data-dismiss = “alert”>

&times;

</a>

<strong>Warning!</strong> Warning! You entered a wrong password.

</div>

</body>

</html>

The above code will generate the following result:

OUTPUT:


OUTPUT

Options:

There are no options for alert plugin.


Methods:

Consider the following table in which methods for alert plugins are described:

Method Description Basic Syntax
.alert () This method is used to wrap the alert plugin with functionality that is “close”. $(‘#identifier’).alert();

 

Close Method:

.alert (‘close’)

This method is used enable a close functionality for all alerts. $(‘#identifier’).alert(‘close’);

 


Example:

Consider the following example in which .alert () method is used:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< meta charset = “utf- 8” >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

<h3>Example of alert() method </h3>

<div id = “Alert1” class = “alert alert-success”>

<a href = “#” class = “close” data-dismiss = “alert”>&times;</a>

<strong>Congratulations!</strong> You have Passed the Examination.

</div>

<div id = “Alert1” class = “alert alert-warning”>

<a href = “#” class = “close” data-dismiss = “alert”>&times;</a>

<strong>Warning!</strong> Please try again.

</div>

<script type = “text/javascript”>

$(function(){

$(“.close”).click(function(){

$(“#Alert1”).alert();

});

});

</script>

</body>

</html>

The above code will generate the following result:

OUTPUT:

alert

Consider the following example which shows the use of .alert(‘close’) method:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< meta charset = “utf- 8” >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

<h3>Example of alert (‘close’) method </h3>

<div id = “Alert1” class = “alert alert-success”>

<a href = “#” class = “close” data-dismiss = “alert”>&times;</a>

<strong>Congratulations!</strong> You have Passed the Examination.

</div>

<div id = “Alert1” class = “alert alert-warning”>

<a href = “#” class = “close” data-dismiss = “alert”>&times;</a>

<strong>Warning!</strong> Please try again.

</div>

<script type = “text/javascript”>

$(function(){

$(“.close”).click(function(){

$(“#Alert1”).alert(‘close’);

});

});

</script>

</body>

</html>

The above example will generate the following result:

OUTPUT:

warning

The close functionality is applied to all alerts and when one message is close other will also be closed.


Events:

Consider the following table in which events of alert plugin are described:

Events Description Basic Syntax
close.bs.alert This event is occurred when close method of alert plugin is called. $(‘#alert1’).bind (‘close.bs.alert’, function () {

Body

})

 

closed.bs.alert This event is occurred when alert has been closed $(‘#alert1’).bind (‘closed.bs.alert’, function () {

Body

})

 


Example:

Consider the following example in which events of alert plugin are used:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< meta charset = “utf- 8” >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

<div id = “Alert1” class = “alert alert-success”>

<a href = “#” class = “close” data-dismiss = “alert”>&times;</a>

<strong>Congratulations!</strong> You have passed the examination.

</div>

<script type = “text/javascript”>

$(function(){

$(“#Alert1”).bind(‘closed.bs.alert’, function () {

alert(“Message is closed!”);

});

});

</script>

</body>

</html>

The above code will generate the following result:

OUTPUT:

congratulations

When you close the message an alert message will appear which is shown in the following image:

ok