How to create alerts in Bootstrap:

Bootstrap provides an easy way to display the information or create predefined alert messages on the screen.

In Bootstrap alert is created using .alert class for example :

<div class="alert alert-success"> 
</div>

Bootstrap alert has for different contextual classes or types to display alert messages :-
alert-success
alert-info
alert-warning
alert-danger

For Example :-

<div class="alert alert-success">
   <strong>Success!</strong> This alert box could indicate a successful or positive action.
  </div>

  <div class="alert alert-info">
    <strong>Info!</strong>This alert box could indicate a neutral informative change or action.
  </div>

  <div class="alert alert-warning">
   <strong>Warning!</strong>This alert box could indicate a warning that might need attention.
 </div>

 <div class="alert alert-danger">
   <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
 </div>

Bootstrap alert also provide alert links class to add links inside the alert message that matches the color of the alert class type.

For example :-
If we add an alert-link inside alert-success class that will match the color of the alert-success class :-

<div class="alert alert-success">
 <strong>Success!</strong> You should <a href="#" class="alert-link">read this message.
</div>

Inside the alert read this message is a link that is added in anchor tag inside alert class.

Bootstrap alert also provides alert-dismissable class that is used to close an alert message.

For example:-

<div class="alert alert-success alert-dismissible">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
   <strong>Success!</strong> This alert box could indicate a successful or positive action.
 </div>

Bootstrap alert also provides Animated alert that is used to add the fading effect while closing an alert message.
Two classes are used for animated alerts that are .fade and .in