Bootstrap 3 Alerts, Full details of Bootstrap 3 Alerts

Bootstrap Tutorial

Bootstrap Alerts

The bootstrap alert messages are commonly used to any important messages such as warning or confirmation messages to the end users. Add dismiss functionality to all alert messages with this plugin.

When using a .close button, it must be the first child of the .alert-dismissible and no text content may come before it in the markup.

Usage

Just add data-dismiss="alert" to your close button to automatically give an alert close functionality. Closing an alert removes it from the DOM.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Alerts</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid"> 
 
<div class="alert alert-success">
      This is <strong>Success!</strong> alert box.
    </div>
    
    <div class="alert alert-info">
        This is <strong>Info!</strong> alert box.
    </div>
    
    <div class="alert alert-warning">
        This is <strong>Warning!</strong> alert box.
    </div>
    
    <div class="alert alert-danger">
        This is <strong>Danger!</strong> alert box.
    </div>
 
</div>  
 
</body>
</html>

Output :

This is Success! alert box.

This is Info! alert box.

This is Warning! alert box.

This is Danger! alert box.

Methods

Method	Description	Example
.alert()	This method wraps all alerts with close functionality.	$('#identifier').alert();
Close Method .alert('close')	To enable all alerts to be closed, add this method.	$('#identifier').alert('close');

Alert Links

Add the alert-link class to any links inside the alert box

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Alert Links</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid"> 
 
  <div class="alert alert-success">
        <strong>Success!</strong> Message link for 
        <a href="http://www.freetimelearning.com" target="_blank" class="alert-link">
        Free time Learning</a>.
      </div>
      <div class="alert alert-info">
        <strong>Info!</strong> Message link for 
        <a href="http://www.freetimelearning.com" target="_blank" class="alert-link">
        Free time Learning</a>.
      </div>
      <div class="alert alert-warning">
        <strong>Warning!</strong> Message link for 
       <a href="http://www.freetimelearning.com" target="_blank" class="alert-link">
       Free time Learning</a>.
      </div>
      <div class="alert alert-danger">
        <strong>Danger!</strong> Message link for 
       <a href="http://www.freetimelearning.com" target="_blank" class="alert-link">
       Free time Learning</a>.
      </div>
 
</div>  
 
</body>
</html>

Output :

Success! Message link for Free time Learning.

Info! Message link for Free time Learning.

Warning! Message link for Free time Learning.

Danger! Message link for Free time Learning.

Closing Alerts

Bootstrap provides an easy way to add close functionality to the alert messages box. Just add the data-dismiss="alert" to the close button and it will automatically enable the dismissal of the containing alert message box.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Closing Alerts</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid"> 
 
  
       <div class="alert alert-success alert-dismissable">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
         Free Time Learning is successfully updated !
      </div>
      <div class="alert alert-info alert-dismissable">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
         Free Time Learning Website information checking.
      </div>
      <div class="alert alert-warning alert-dismissable">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
         Free Time Learning warning message.
      </div>
      <div class="alert alert-danger alert-dismissable">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
        This Content is Deleted successfully!
      </div>
 
</div>  
 
</body>
</html>

Output :

× Free Time Learning is successfully updated !

× Free Time Learning Website information checking.

× Free Time Learning warning message.

× This Content is Deleted successfully!

Javascript Closing Alerts

<!DOCTYPE html>
<html>
<head>
   <title>Javascript Closing Alerts</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
 
   <script type="text/javascript">
    $(document).ready(function(){
        $(".close").click(function(){
            $("#myAlert").alert();
        });
    });
    </script>

</head>
<body>
 
<div class="container-fluid" style="padding:15px 0px;">
 
    <div class="alert alert-danger" id="myAlert">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        This is Javascript closing alert box.
    </div>
    
</div>
 
</body>
</html>

Output :

× This is Javascript closing alert box.

Events

Bootstrap's alert plugin exposes a few events for hooking into alert functionality.

Event Type	Description
close.bs.alert	This event fires immediately when the `close` instance method is called.
closed.bs.alert	This event is fired when the alert has been closed (will wait for CSS transitions to complete).

Bootstrap Tutorial