Bootstrap Tutorial - Bootstrap Alert








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>

Click to view the demo

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:

  • alert-success
  • alert-info
  • alert-danger
  • alert-warning




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">&times;</button>
        Amount  has been transferred successfully. 
        Go to <a href="http://java2s.com" class="alert-link">account page</a>.
    </div>
  </body>
</html>

Click to view the demo





Warning Alerts

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">&times;</a>
        <strong>Warning!</strong> There was a problem with your network connection.
    </div>
</div>
</body>
</html>

Click to view the demo

Error or Danger Alerts

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">&times;</a>
        <strong>Error!</strong> A problem has been occurred while submitting your data.
    </div>
</div>
</body>
</html>

Click to view the demo

Success or Confirmation Alerts

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">&times;</a>
        <strong>Success!</strong> Your message has been sent successfully.
    </div>
</div>
</body>
</html>

Click to view the demo

Information Alerts

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">&times;</a>
        <strong>Note!</strong> Please read the comments carefully.
    </div>
</div>
</body>
</html>

Click to view the demo

Dismissable alert box via data-dismiss

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">&times;</button>
        Amount  has been transferred successfully.
    </div>
  </body>
</html>

Click to view the demo

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.

Dismiss Alerts via JavaScript

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">&times;</a>
        <strong>Error!</strong> A problem has been occurred while submitting your data.
    </div>
</div>
</body>
</html>

Click to view the demo

$().alert()

$().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">&times;</a>
        <strong>Note!</strong> Please read the comments carefully.
    </div>
</div>
</body>
</html>

Click to view the demo

$().alert('close')

$().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">&times;</a>
        <strong>Note!</strong> Please read the comments carefully.
    </div>
</div>
</body>
</html>

Click to view the demo

Events

Bootstrap's alert class includes a few events.

EventDescription
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">&times;</a>
        <strong>Note!</strong> Please read the comments carefully.
    </div>
</div>
</body>
</html>

Click to view the demo