Alert boxes are used quite often to stand out the information that requires an immediate attention of the end users such as warning, error or confirmation messages.
Example: Example of Different alert messages
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap : Alert and its Variations</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.bootstrap-demo{margin:40px;}
</style>
<body>
<h4> Bootstrap : Alert and its Variations: </h4>
<div class="bootstrap-demo">
<div class="alert alert-success"> <!-- Success Alert -->
<strong>Great !</strong> Your Transaction was successfully Completed.
</div>
<div class="alert alert-info"> <!-- Information Alert -->
<strong>Heads up!</strong> Your Password Looks weak, consider changing it.
</div>
<div class="alert alert-warning"> <!-- Warning Alert -->
<strong>Warning!</strong> Something went wrong, wait till the problem get resolved.
</div>
<div class="alert alert-danger"> <!-- Danger Alert -->
<strong>Oh snap!</strong> The process is still in the continuation process,please wait.
</div>
</div>
</body>
E.g. Description
In the above Example specifies, the functioning of different alerts in the class '.alert' like information, success, warning, danger alerts which specifies us information regarding each alerts in alert class by the padding effect.
Creating Alert Messages with Bootstrap
Warning Alerts
You can create a simple Bootstrap warning alert message box by adding the contextual class .alert-warning to the '.alert' base class
Error or Danger Alerts
Add the class alert-danger to the '.alert' base class to create error or danger alerts.
Success or Confirmation Alerts
Similarly, to create the success or confirmation alert message box add the contextual class.alert-success
Information Alerts
For information alert messages add the class alert-info to the '.alert' base class.
No comments:
Post a Comment