<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Alerts</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="alert alert-success">
This is <strong>Success!</strong> alert box.
</div>
<div class="alert alert-info">
This is <strong>Info!</strong> alert box.
</div>
<div class="alert alert-warning">
This is <strong>Warning!</strong> alert box.
</div>
<div class="alert alert-danger">
This is <strong>Danger!</strong> alert box.
</div>
</div>
</body>
</html>
Method | Description | Example |
---|---|---|
.alert() | This method wraps all alerts with close functionality. |
$('#identifier').alert();
|
Close Method .alert('close') |
To enable all alerts to be closed, add this method. |
$('#identifier').alert('close');
|
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Alert Links</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="alert alert-success">
<strong>Success!</strong> Message link for
<a href="http://www.freetimelearning.com" target="_blank" class="alert-link">
Free time Learning</a>.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Message link for
<a href="http://www.freetimelearning.com" target="_blank" class="alert-link">
Free time Learning</a>.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Message link for
<a href="http://www.freetimelearning.com" target="_blank" class="alert-link">
Free time Learning</a>.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Message link for
<a href="http://www.freetimelearning.com" target="_blank" class="alert-link">
Free time Learning</a>.
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Closing Alerts</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="alert alert-success alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
Free Time Learning is successfully updated !
</div>
<div class="alert alert-info alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
Free Time Learning Website information checking.
</div>
<div class="alert alert-warning alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
Free Time Learning warning message.
</div>
<div class="alert alert-danger alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
This Content is Deleted successfully!
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Javascript Closing Alerts</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".close").click(function(){
$("#myAlert").alert();
});
});
</script>
</head>
<body>
<div class="container-fluid" style="padding:15px 0px;">
<div class="alert alert-danger" id="myAlert">
<a href="#" class="close" data-dismiss="alert">×</a>
This is Javascript closing alert box.
</div>
</div>
</body>
</html>
Event Type | 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). |