Bootstrap provides a way to easily display an “alert” message. Essentially it is a background color, and foreground color which work together to make a message standout. An alert is generally going to be a simple block of text, and doesn’t have a lot of extra markups text.
This works similarly to if you had added the bg-<color type> and text-<color type> to the same element. It also adds a small rounded corner to the element.
You will need to add the
alert class, as well as an
alert- class to the div, if you want to use the alert.
An example of the types you can see are below:
<div class="alert alert-success">You have succeeded in something...</div> <div class="alert alert-info">General info is now.</div> <div class="alert alert-warning">Careful, you are headed into dangerous areas.</div> <div class="alert alert-danger">You have officially reached a danger level.</div>
By default, the alerts are always visible. Sometimes you want to allow the end user to close out the message. You have the ability to add an “X” which users can click on to close out the alert message.
To do this, you will need to add the
<div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <strong>Warning!</strong> You can close this alert box. </div>
Linking in an Alert
You can also link to a file from within the alert. To do so, you will want to add the class
alert-link to the anchor element. This is good if you have a situation which you want to have a user address by clicking on a link.
For example, you might have a user whose password is about to expire, so you provide an alert, with a link to the change password. See the example below:
<div class="alert alert-warning"> Warning! You're password is about to expire in 3 days. <a href="#" class="alert-link">Click here</a> to change your password. </div>