--- title: "Animated alert message box with the help of Bootstrap" description: "Animated alert message box with the help of Bootstrap" author: "Ethan Karla" published: 2021-07-28 updated: 2021-07-28 canonical: https://www.mindstick.com/forum/156604/animated-alert-message-box-with-the-help-of-bootstrap category: "bootstrap" tags: ["bootstrap"] reading_time: 3 minutes --- # Animated alert message box with the help of Bootstrap How to create [animated alert message box](https://answers.mindstick.com/qa/93857/how-to-make-an-animated-alert-message-box-with-the-help-of-an-bootstrap) with the help of [Bootstrap](https://www.mindstick.com/articles/1555/image-viewer-using-bootstrap-carousel)?\ ## Replies ### Reply by Anonymous User Creating [Alert](https://answers.mindstick.com/qa/30927/what-is-an-alert) [Message](https://www.mindstick.com/forum/12802/show-confirmation-message-yes-or-no-in-asp-dot-net) 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: ```                       Hello, world!    
       

Animated Alerts

       

The .fade and .in classes adds a fading effect when closing the alert message.

       
            ×             Success! This alert box could indicate a successful or positive action.        
       
            ×             Info! This alert box could indicate a neutral informative change or action.        
       
            ×             Warning! This alert box could indicate a warning that might need attention.        
       
            ×             Danger! This alert box could indicate a dangerous or potentially negative action.        
   
``` Output : ![Animated alert message box with the help of Bootstrap](https://www.mindstick.com/mindstickforums/9988f792-70d8-461a-bd03-f90efe61ec37/images/d1c00845-7ecd-4bcb-bb8c-53096f9846ba.png) Hope this will help you. Happy Coding! --- Original Source: https://www.mindstick.com/forum/156604/animated-alert-message-box-with-the-help-of-bootstrap Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.