Bootstrap Alert

0 3783

Bootstrap alert component to create alert messages like warning, success and error message display important and critical information for user. Now you can easily display the mobile responsive alert messages like success, warnings and any error messages as per your need.

You can modify the code (display messages) as per your requirement.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div class="container">
<h1> Bootstrap Alert </h1>

<div class="alert alert-warning">
<a
 href="#" class="close" data-dismiss="alert"> <span 
class="glyphicon glyphicon-remove-circle" aria-hidden="true"> 
</span> </a>
<span class="glyphicon 
glyphicon-warning-sign" aria-hidden="true"> </span> 
<strong> Warning! </strong> Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.
</div>
<div class="alert alert-danger">
<a
 href="#" class="close" data-dismiss="alert"> <span 
class="glyphicon glyphicon-remove-circle" aria-hidden="true"> 
</span> </a>
<span class="glyphicon 
glyphicon-exclamation-sign" aria-hidden="true"></span> 
<strong> Error! </strong> Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.
</div>
<div class="alert alert-success">
<a
 href="#" class="close" data-dismiss="alert"><span 
class="glyphicon glyphicon-remove-circle" aria-hidden="true"> 
</span> </a>
<span class="glyphicon glyphicon-ok" 
aria-hidden="true"></span> <strong> Success 
</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"> </script>

</body>

</html>