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:
You have succeeded in something...General info is now.Careful, you are headed into dangerous areas.You have officially reached a danger level.
Dismissible Alerts
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 alert-dismissable class.
Note: You will need to make sure you have JavaScript files added to the web page to ensure you can dismiss the content. You will also need to add an additional button to your alert to make sure it has something that the user can click on.
Warning! You can close this alert box.
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:
Warning! You're password is about to expire in 3 days. Click here to change your password.
Alerts in Bootstrap was originally found on Access 2 Learn
