Bootstrap Alerts

An alert in web development terms is a message that informs use of some activity on the webpage or asks user for input. JavaScript alerts are one of the most common type of client side implementation of alerts. Bootstrap also comes with pre-formatted set of alerts. These alerts differ by style. To use bootstrap alerts, simply add the class of the alert to the div which you want to display as an alert. For instance if you want to display a success alert, you have to use “alert” and “alert-success” classes in your div. Take a look at the following example.

If you open the above page in browser, you should see four different messages, each with its own style. The first message is the success message shaded in green. The second is the “info” message. The third message with light orange shade is the warning message. Similarly, the last message with red shade is the danger message. If you look at the code, you can see that each type of message has a corresponding class name that is added to the div.

Closing Bootstrap Alerts

You can also create alerts that can be closed. To do so, simply add “close” class to the link and “data-dismiss=alert” to the button or link inside the alert. Take a look at the following example.