The alert component is used to provide visual feedback to the user. This can be used to provide the user with either confirmation messages that a record has been saved, warning messages that an error has occurred, or an information message based on a system event.
Bootstrap provides four differently styled alerts. For instance, the following markup generates green, blue, orange, and red alert boxes:
<div class="alert alert-success" role="alert"> <strong>Success!</strong> You have successfully saved the file. </div> <div class="alert alert-info" role="alert"> <strong>Info.</strong> Something has just happened. </div> <div class="alert alert-warning" role="alert"> <strong>Warning!</strong> The file size is too big. </div> <div class="alert alert-danger" role="alert"> <strong>Danger!</strong> The file could not be saved </div>
The alert boxes should look similar to the following image in your browser:
A dismissible
alert is an alert that can be closed by the user clicking on a small X icon in its top right-hand corner. In order to create a dismissible alert, you must have the alert plugin or the Bootstrap JavaScript library loaded, added the .alert-dismissable
class name to the alert <div>
, and set the alert's close button's class to .close
. The following HTML markup illustrates how to create a dismissible alert:
<div class="alert alert-danger alert-dismissible fade in" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <strong>Something went wrong!</strong> You can close this alert when done. </div>
3.135.247.68