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">&times;</span> 
    </button> 
    <strong>Something went wrong!</strong> You can close this alert when done. 
</div>