Bootstrap Alert

Bootstrap alert component to create alert messages like warning, success & 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>

RESULT:

bootstrap-alert




Leave a Reply

avatar
  Subscribe  
Notify of