How to make an animated alert message box with the help of an Bootstrap?

0 votes
60 views
Ethan Karla asked 28-Jul-2021 in Web Application by Ethan Karla

How to make an animated alert message box with the help of an Bootstrap?

1 Answer

0 votes
Ravi Vishwakarma answered 12-Aug-2021 by Ravi Vishwakarma

We can create an alert box in two ways. Using animation and normal. if we create the animation on the alert box then give the two classes '.fade' and '.show'. if not create the animation don't use these two classes. 

.fade   showing animation like fade-in and fade-out smoothly 
.show used for showing the elements 
.hide  used for hiding the elements

Example 

<!DOCTYPE html>

<html lang='en'>
<head>
  <title>Bootstrap Example</title>
  <meta charset='utf-8'>
  <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>
</head>
<body>
<div class='container mt-2'>
  <h2>Animated Alerts</h2>
  <div class='alert alert-danger alert-dismissible fade show'>
    <button type='button' class='close' data-dismiss='alert'>&times;</button>
    <strong>Danger !!! </strong> This is danger alert box with close button and animation<br />
      This alert is close smoothally
  </div>
    <div class='alert alert-danger alert-dismissible'>
    <button type='button' class='close' data-dismiss='alert'>&times;</button>
    <strong>Danger !!! </strong> This is danger alert box with close button
  </div>
</div>
</body>
</html>

output

How to make an animated alert message box with the help of an Bootstrap?