---
title: "How to make an animated alert message box with the help of an Bootstrap?"
description: "How to make an animated alert message box with the help of an Bootstrap?"
author: "Ethan Karla"
published: 2021-07-28
canonical: https://answers.mindstick.com/qa/93857/how-to-make-an-animated-alert-message-box-with-the-help-of-an-bootstrap
category: "web application"
tags: ["web application development", "web development"]
reading_time: 2 minutes
---
# How to make an animated alert message box with the help of an Bootstrap?
How to make an [animated alert message box](https://www.mindstick.com/forum/156604/animated-alert-message-box-with-the-help-of-bootstrap) with the help of an [Bootstrap](https://www.mindstick.com/articles/43948/top-free-resources-for-learning-and-perfecting-bootstrap-programming)?
## Answers
### Answer by Ravi Vishwakarma
We can create an [alert](https://yourviews.mindstick.com/view/82755/high-medical-alert-new-variant-of-covid-19-c-1-2) 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
```
Bootstrap Example
Animated Alerts
Danger !!! This is danger alert box with close button and animation
This alert is close smoothally
Danger !!! This is danger alert box with close button