Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

Home Forums Animated alert message box with the help of Bootstrap – MindStick
Ask Question

1 Answers

Anonymous User
Anonymous User 29 Jul 2021
Report Abuse

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 :

Anonymous User

Hope this will help you.

Happy Coding!

MindStick Training
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md