Bootstrap alerts are the easiest and the quickest way of creating warning message, success message, and other informational messages. Here is the simple example of Bootstrap alert.
|
1 |
<div class="alert alert-success"><strong>Success</strong>! You have successfully signed up.</div> |
Output
You can use these bootstrap alerts messages in your websites on developing codes, submitting forms and get user queries. Alert messages with close button are easily 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 <div> element with the one of the above given class.
|
1 2 3 4 |
<div class="alert alert-success"><strong>Success</strong>! You have successfully signed up.</div> <div class="alert alert-info"><strong>Info</strong>! Please enter the required information.</div> <div class="alert alert-warning"><strong>Warning</strong>! Please check your network connection</div> <div class="alert alert-danger"><strong>Error</strong>! Submission of form failed.</div> |
Output
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".
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="alert alert-success alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Success</strong>! You have successfully signed up. </div> <div class="alert alert-info"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Info</strong>! Please enter the required information. </div> <div class="alert alert-warning"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Warning</strong>! Please check your network connection </div> <div class="alert alert-danger"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Error</strong>! Submission of form failed. </div> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="alert alert-success alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Success</strong>! You have successfully signed up. <a href="#" class="alert-link">See details here</a>. </div> <div class="alert alert-info"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Info</strong>! Please enter the required information. <a href="#" class="alert-link">See details here</a>. </div> <div class="alert alert-warning"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Warning</strong>! Please check your network connection. <a href="#" class="alert-link">See details here</a>. </div> <div class="alert alert-danger"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Error</strong>! Submission of form failed. <a href="#" class="alert-link">See details here</a>. </div> |
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.