forum

home / developersection / forums / animated alert message box with the help of bootstrap

Ask Question

Animated alert message box with the help of Bootstrap

Ethan Karla 265 28-Jul-2021

How to create animated alert message box with the help of Bootstrap?
bootstrap bootstrap 
Updated on 28-Jul-2021
Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

29-Jul-2021

Creating Alert Message Box with the help of Bootstrap Library.

Follow the steps below to create an alert box :

  • First add the Bootstrap library to your project using the Starter template.
  • Create a div with the .alert class and add the .alert-dismissible class with the fade in class to create the animated close alert box.
  • Now add anchor tag and add data-dismiss='alert' attribute with this key value pair.
  • Refresh your HTML file You will now see an alert box working with an animation of the close button.
  • To animate when the alert is dismissed, be sure to add the .fade and .show classes.

You can see this in action with the below example of an alert : 

You can see this in action with a live demo: 

<!doctype html>

<html lang='en'>

<head>

    <!-- Required meta tags -->

    <meta charset='utf-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>

  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>

    <title>Hello, world!</title>

</head>

<body>

    <div class='container'>

        <h2>Animated Alerts</h2>

        <p>The .fade and .in classes adds a fading effect when closing the alert message.</p>

        <div class='alert alert-success alert-dismissible fade in'>

            <a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a>

            <strong>Success!</strong> This alert box could indicate a successful or positive action.

        </div>

        <div class='alert alert-info alert-dismissible fade in'>

            <a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a>

            <strong>Info!</strong> This alert box could indicate a neutral informative change or action.

        </div>

        <div class='alert alert-warning alert-dismissible fade in'>

            <a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a>

            <strong>Warning!</strong> This alert box could indicate a warning that might need attention.

        </div>

        <div class='alert alert-danger alert-dismissible fade in'>

            <a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a>

            <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.

        </div>

    </div>

</body>

</html>

Output :

Animated alert message box with the help of Bootstrap

Hope this will help you.

Happy Coding!

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy