Bootstrap animated alert

bootstrap animated alert message
bootstrap animated alert message

How to show bootstrap animated alert? here in this article i will provide complete source code of bootstrap animated alert and hide after few second.

How to hide bootstrap alert after few second

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap Alerts | How to hide bootstrap alert after few second | Bootstrap animated alert popup | </title>
<meta name="keywords" content="Bootstrap alert popup  | bootstrap success message popup | bootstrap alert popup jquery | hide bootstrap alert after few second"  />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

  <div class="container">
    <h2>Bootstrap animated Snippet Alerts</h2>

   <div class="alert alert-success hide1" role="alert">
     <strong>Well done!</strong> Animated Bootstrap Alert popup
     <div class="linep al1"></div>
   </div>
   <div class="alert alert-info hide2" role="alert">
     <strong>Heads up!</strong> Animated Bootstrap Alert popup
     <div class="linep al2"></div>
   </div>
   <div class="alert alert-warning hide3" role="alert">
     <strong>Warning!</strong> Animated Bootstrap Alert popup
     <div class="linep al3"></div>
   </div>
   <div class="alert alert-danger hide4" role="alert">
     <strong>Oh snap!</strong> Animated Bootstrap Alert popup
     <div class="linep al4"></div>
   </div>


<script>
   setTimeout(function() {
    $('.hide1').fadeOut('slow');
    }, 1200);
	
	setTimeout(function() {
    $('.hide2').fadeOut('slow');
    }, 2200); 
	
	setTimeout(function() {
    $('.hide3').fadeOut('slow');
    }, 3200);
	
	setTimeout(function() {
    $('.hide4').fadeOut('slow');
    }, 4200); 
</script>
</body>
</html>

Leave a Reply

avatar
  Subscribe  
Notify of