Bootstrap comes with a very useful component for displaying alert messages.
We can use them for displaying a success message, a warning message, a failure message, or an information message.
Here's the markup for a "success" alert message:
<!DOCTYPE html>
<html lang="en">
<head>
<script type='text/javascript'
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!--from w ww . j av a 2 s . c o m-->
</head>
<body style='margin:30px'>
<div class="alert alert-success">
Amount has been transferred successfully.
</div>
</body>
</html>
Every alert should have the alert
class attached to it.
It should also have an additional contextual class, such as alert-success. There are four self-explanatory contextual classes for alert messages:
To place a link within an alert, you need to add
a class alert-link
to the a element.
This provides a matching color to link with respect to the alert box color:
<!DOCTYPE html>
<html lang="en">
<head>
<script type='text/javascript'
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- ww w . ja va 2 s . c o m-->
</head>
<body style='margin:30px'>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close"
data-dismiss="alert">×</button>
Amount has been transferred successfully.
Go to <a href="http://java2s.com" class="alert-link">account page</a>.
</div>
</body>
</html>
We can create a warning alert message using the class .alert.
<!-- ww w . j a v a2 s. c o m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Warning!</strong> There was a problem with your network connection.
</div>
</div>
</body>
</html>
We can create error or danger alert messages by adding an extra class .alert-error to the .alert base class.
<!-- w w w .java 2 s. c o m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="alert alert-danger alert-error">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Error!</strong> A problem has been occurred while submitting your data.
</div>
</div>
</body>
</html>
To create success or confirmation alert messages add an extra class .alert-success to the .alert base class.
<!-- ww w . j a v a2 s . co m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Success!</strong> Your message has been sent successfully.
</div>
</div>
</body>
</html>
For information alert messages, add an extra class .alert-info to the .alert base class.
<!-- w ww .j a v a 2 s . c om-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="alert alert-info">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Note!</strong> Please read the comments carefully.
</div>
</div>
</body>
</html>
The following markup is for a dismissable alert box.
<!DOCTYPE html>
<html lang="en">
<head>
<script type='text/javascript'
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- www .j a v a2s . co m-->
</head>
<body style='margin:30px'>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
Amount has been transferred successfully.
</div>
</body>
</html>
To create a dismissable alert message, we need to
add class alert-dismissable
to the alert box.
Next, we require a button that will close the alert message when clicked. The button should have data-dismiss attribute, which tells Bootstrap the component to dismiss when clicked.
We may enable the dismissal of an alert via JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from ww w . j av a 2 s . c o m-->
$(".close").click(function(){
$("#myAlert").alert();
});
});
</script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="alert alert-danger" id="myAlert">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Error!</strong> A problem has been occurred while submitting your data.
</div>
</div>
</body>
</html>
$().alert() method wraps all alerts with close functionality.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from www . j a v a 2 s.com-->
$(".close").click(function(){
$("#myAlert").alert();
});
});
</script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div id="myAlert" class="alert alert-info">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Note!</strong> Please read the comments carefully.
</div>
</div>
</body>
</html>
$().alert('close') method closes an alert message box.
<!-- w ww. j ava 2 s . com-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".close").click(function(){
$("#myAlert").alert('close');
});
});
</script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div id="myAlert" class="alert alert-info">
<a href="#" class="close">×</a>
<strong>Note!</strong> Please read the comments carefully.
</div>
</div>
</body>
</html>
Bootstrap's alert class includes a few events.
Event | Description |
---|---|
close.bs.alert | fires when the close method is called. |
closed.bs.alert | fires when the alert message box has been closed. It will wait until the CSS transition process has been completed. |
The following example displays an alert message to the user when fade out transition of an alert message box has been fully completed.
<!-- ww w.jav a 2s . co m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myAlert").bind('closed.bs.alert', function(){
alert("Alert message box has been closed.");
});
});
</script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div id="myAlert" class="alert alert-info">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Note!</strong> Please read the comments carefully.
</div>
</div>
</body>
</html>