Bootstrap
In this tutorial we will learn about alerts in Bootstrap.
Alerts are used to provide feedback based on user actions. So we can prompt a success alert on success or an info alert to the user to inform about something.
To create an alert we use the .alert class. Then we add the following class to style the alerts.
.alert
.alert-success
.alert-info
.alert-danger
.alert-warning
<!-- success alert --> <div class="alert alert-success"> <p>This is a success alert.</p> </div> <!-- info alert --> <div class="alert alert-info"> <p>This is an info alert.</p> </div> <!-- danger alert --> <div class="alert alert-danger"> <p>This is a danger alert.</p> </div> <!-- warning alert --> <div class="alert alert-warning"> <p>This is a warning alert.</p> </div>
Output:
We can even create a dismissible alert by adding an optional .alert-dismissible class and a close button.
.alert-dismissible
Requires JavaScript alert plugin.
<!-- success alert --> <div class="alert alert-success alert-dismissible"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <p>This is a success alert.</p> </div>
We can even include links inside an alert using the anchor tag and adding the .alert-link class.
.alert-link
<div class="alert alert-success" role="alert"> <p><a href="#" class="alert-link">Click here</a> to continue.</p> </div>