Bootstrap Alerts

An alert in web development terms is a message that informs use of some activity on the webpage or asks user for input. JavaScript alerts are one of the most common type of client side implementation of alerts. Bootstrap also comes with pre-formatted set of alerts. These alerts differ by style. To use bootstrap alerts, simply add the class of the alert to the div which you want to display as an alert. For instance if you want to display a success alert, you have to use “alert” and “alert-success” classes in your div. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>
        <div class="alert alert-success">
          <strong>Congratulations!</strong> This is a success message.
        </div>

        <div class="alert alert-info">
          <strong>Info!</strong> Press next to move to next tutorials.
        </div>

        <div class="alert alert-warning">
          <strong>Caution!</strong> Diversion ahead, drive carefully.
        </div>

        <div class="alert alert-danger">
          <strong>Danger Message!</strong> Fuel Tank, Pleae keep a distance.
        </div>
    </body>

</html>

Download the code
Try the code

If you open the above page in browser, you should see four different messages, each with its own style. The first message is the success message shaded in green. The second is the “info” message. The third message with light orange shade is the warning message. Similarly, the last message with red shade is the danger message. If you look at the code, you can see that each type of message has a corresponding class name that is added to the div.

Closing Bootstrap Alerts

You can also create alerts that can be closed. To do so, simply add “close” class to the link and “data-dismiss=alert” to the button or link inside the alert. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>
        <div class="alert alert-danger">
          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
          <strong>Danger!</strong> Fuel Tank, Please keep a distance.
        </div>
    </body>

</html>

Download the code
Try the code

Now if you look the above webpage, it will contain a danger message with a small “cross” link on the very right of the message box. Clicking the button should close the alert box.

Adding Animations to Alert Box

You can animate alert box by adding “fade” and “in” classes to the alert box. This creates fade effect when you close the alert box. Take a look at the following.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>
        <div class="alert alert-danger fade in">
          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
          <strong>Danger!</strong> Fuel Tank, Please keep a distance.
        </div>
    </body>

</html>

Download the code
Try the code

<<< Bootstrap JumbotronBootstrap Buttons >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .