Bootstrap Basic Tutorial

Bootstrap Plugins

Bootstrap Button Plugin Bootstrap Popover Plugin

Bootstrap Alert Plugin (Alert)

Alert messages in Bootstrap are mostly used to display information such as warnings or confirmation messages to the end user. With the Alert Plugin (Alert), you can add a dismissable (cancelable) feature to all alert box messages.

Usage

There are two ways you can enable the dismissable (cancelable) feature of the alert boxes:

Through the data attributeTo add cancelable functionality through the Data API (Data API), simply add data-dismiss="alert"and it will automatically add a close feature to the alert box.
```
<a data-dismiss="alert" href="#" aria-hidden="true">
　　　　×
</</a>
```
Through JavaScriptTo add cancelable functionality through JavaScript:
```
$(".alert").alert()
```

Online Example

The following examples demonstrate how to use the Alert Plugin (Alert) through the data attribute.

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Alert Plugin (Alert)/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="alert alert-warning">
	<a href="#" class="close" data-dismiss="alert">
		×
	</</a>
	<strong>Warning!</strong>/<strong>Your network connection is not working.</strong>
</div>
</body>
</html>

Test and see ‹/›

The results are as follows:

Options

No options.

Methods

Here are some useful methods in the Alert Plugin (Alert):

Methods	Description	Example
.alert()	This method enables all alert boxes to have a close feature.	$('#identifier').alert();
Close method .alert('close')	Close all alert boxes.	$('#identifier').alert('close');

To enable animation effects on close, make sure you have added .fade and .in class.

Online Example

The following examples demonstrate .alert() Usage of the method:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Example　-　>Alert Plugin (Alert) <alert()> Method</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Alert Plugin (Alert) <alert()> Method</h2>
<div id="myAlert" class="alert alert-success">
　　　　<a href="#" class="close" data-×/</a>
　　　　Success!/The result is successful.
</div>
<div id="myAlert2" class="alert alert-warning">
　　　　<a href="#" class="close" data-×/</a>
　　　　<strong>Warning!</strong>/<strong>Your network connection is not working.</strong>
</div>
　
<script>
$(function() {
　　　　$(".close").click(function() {
　　　　　　　　$("#myAlert").alert();
　　　　　　　　$("#myAlert2").alert();
　　　　});
});
</script>
</body>
</html>

Test and see ‹/›

The following examples demonstrate .alert('close') Usage of the method:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Example　-　>Alert Plugin (Alert) <alert('close')> Method</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Alert Plugin (Alert) <alert('close')> Method</h2>
<div id="myAlert" class="alert alert-success">
　　　　<a href="#" class="close" data-×/</a>
　　　　Success!/The result is successful.
</div>
<div id="myAlert2" class="alert alert-warning">
　　　　<a href="#" class="close" data-×/</a>
　　　　<strong>Warning!</strong>/<strong>Your network connection is not working.</strong>
</div>
　
<script>
$(function() {
　　　　$(".close").click(function() {
　　　　　　　　$("#myAlert").alert('close');
　　　　　　　　$("#myAlert2").alert('close');
　　　　});
});
</script>
</body>
</html>

Test and see ‹/›

You can see that all alerts have the close function applied, that is, closing any alert will also close the remaining alerts.

Event

The following table lists the events used in the Alert plugin. These events can be used as hooks in functions.

Event	Description	Example
close.bs.alert	When calling close This event is triggered immediately when the example method is called.	$('#myalert').bind('close.bs.alert', function () { 　　//　Perform some actions... )
closed.bs.alert	This event is triggered when the alert is closed (the CSS transition effect will be completed).	$('#myalert').bind('closed.bs.alert', function () { 　　　　//　Perform some actions... )

Online Example

The following example demonstrates the events of the Alert plugin:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Alert Plugin Event</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myAlert" class="alert alert-success">
	<a href="#" class="close" data-×/</a>
	Success!/The result is successful.
</div>
<script type="text/javascript">
$(function() {
	$("#myAlert").bind('closed.bs.alert', function () {
		alert("The alert box has been closed.");
	});
});
</script>　　
</body>
</html>

Test and see ‹/›

The results are as follows:

Bootstrap Button Plugin Bootstrap Popover Plugin