Bootstrap alerts are the easiest and the quickest way of creating warning message, success message, and other informational messages.

You can use these bootstrap alerts messages in your websites on developing codes, submitting forms and get user query. Alert messages with close button easily be created using few classes of Bootstrap given in this tutorial.

Create Bootstrap Alerts Using Contextual Classes

To create alerts, there are four different types of classes given by bootstrap to create alerts with the addition of these classes.

These four classes are given below with the description.

Class Name Description
.alert-success Used to display the successful alert message.
.alert-info Show information and display alert message.
.alert-warning When you want to display warning alerts to your users, you can use this class.
.alert-danger Specify failed action alert using this class.

Let's see the alert messages and the look and feel of these message with the example given below. You need to add the class .alert as the common class of HTML <div> element with the one of the above given class.

Output

Success! You have successfully signed up.
Info! Please enter the required information.
Warning! Please check your network connection
Error! Submission of form failed.

These messages do not contain the close button to hide them on click of the button. However, bootstrap also provides the dismissible class which hides the alerts messages.

Create Dismissal Alert Using Bootstrap

You can also create an alert message with the close button to hide them on click of the button. These warning messages are same as the messages given in the above example.

In addition to the above messages, there is a button given with these messages which give you click functionality to hide the messages when you click the button.

To create dismissal alerts, you need to add the class .alert-dismissible as the class of div element. Inside the div element, you have to add the button types with class .close and attribute data-dismiss="alert".

Output

Success! You have successfully signed up.
Info! Please enter the required information.
Warning! Please check your network connection
Error! Submission of form failed.

Now, click the cross button given to the right side of each message. The message will disappear on click of the button using the javascript plugin.

How to Add Links in Bootstrap Alert

To create links with the alert messages, you have to add the <a> tag with the class alert-link. Add the links anywhere inside the anchor links.

See the example below with the anchor links given at the end of each message.

Output

Success! You have successfully signed up. See details here.
Info! Please enter the required information. See details here.
Warning! Please check your network connection. See details here.
Error! Submission of form failed. See details here.
Reference
Getbootstrap Doc

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.