Bootstrap Tutorial - Bootstrap alert fadein effect








Make an alert fadein

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>
<!--from   w  w w. j av  a2 s  .c  om-->
</head>
<body style='margin: 20px;'>
  <script type='text/javascript'>
    $(document).ready(function() {
      if ($("[rel=popover]").length) {
        $("[rel=popover]").popover();
      }
    });
  </script>

  <div class="alert fade in">
    <button type="button" class="close" data-dismiss="alert">?</button>
    <strong>Holy guacamole!</strong> Best check yo self, you're not
    looking too good.
  </div>

</body>
</html>

Click to view the demo





Error alert fade in.

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>
</head><!-- ww  w .jav a2s.c  om-->
<body style='margin: 20px;'>
  <script type='text/javascript'>
    $(document).ready(function() {
      if ($("[rel=popover]").length) {
        $("[rel=popover]").popover();
      }
    });
  </script>

  <div class="alert alert-block alert-error fade in">
    <button type="button" class="close" data-dismiss="alert">?</button>
    <h4>Oh snap! You got an error!</h4>
    <p>Change this and that and try again. Duis mollis, est non
      commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec
      elit. Cras mattis consectetur purus sit amet fermentum.</p>
    <p>
      <a class="btn btn-danger" href="#">Take this action</a> <a
        class="btn btn-default" href="#">Or do this</a>
    </p>
  </div>
</body>
</html>

Click to view the demo