Bootstrap Code

Output

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
<h1>The Bootstrap Alert demo</h1>
 
    <p class="alert alert-success" id="warnalert">This alert will be closed in four seconds automatically!</p>
    <div class="alert alert-info">The Bootstrap alerts are created by using .alert class.</div>
    <span class="alert alert-danger" id="dangeralert">Click the button to close this alert!</span>
    
    <p><button type="button" id="closealert" class="btn btn-danger btn-lg">Close alert</button></p>
    
</div>
</div>    
<script>
$("#warnalert").fadeOut(4000 );

$("#closealert").click(function(){
    $("#dangeralert").fadeOut(2000 );
});

</script>
</body>
</html>

The Bootstrap Alert demo

This alert will be closed in four seconds automatically!

The Bootstrap alerts are created by using .alert class.

Click the button to close this alert!