Description
Bootstrap Alerts are nothing but the feedback messages that are of contextual type used for determining the typical user actions. They grab the attention of users by showing messages like errors, warning or confirmation messages.
Alerts are shown in different styles. In this chapter, the following topics will be explained.
- Types of alerts
- Dismissal Alerts
- Links in Alerts
Description
Alerts are of various types. All these use contextual classes.
This alert is used to provide any important information to the user by adding the class .alert-info to the .alert base class.
To give success or confirmation alerts, add contextual class .alert-success to the .alert base class.
The class .alert-danger is added to the .alert base class to display error alerts.
Add contextual class .alert-warning to the .alert base class to display warning alert message.
Example
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<br>
<!--Success alert-->
<div class="alert alert-success" role="alert">
<strong>Success!</strong> Your message has been sent successfully.
</div>
<!--info alert-->
<div class="alert alert-info" role="alert">
<strong>Note!</strong> Please read the comments carefully.
</div>
<!--Warning alert-->
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> There was a problem with your network.
</div>
<!--Error alert-->
<div class="alert alert-danger" role="alert">
<strong>Error!</strong> A problem has been occurred while submitting your data.
</div>
</body>
</html>
[/html]
Output:
Success! Your message has been sent successfully.
Note! Please read the comments carefully.
Warning! There was a problem with your network.
Error! A problem has been occurred while submitting your data.
Description
Dismissing alerts is making the alerts disappear. To use this properly, first create an alert by wrapping in <div> and then add .alert-dismissable class, which adds padding to the right of alert and gives a position to close button.
Next add class=”close” and data-dismiss=”alert” to the button type. To animate the alerts while dismissing, .fade and .in classes can be added.
Example
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class = "alert alert-success alert-dismissable">
<button type = "button" class = "close" data-dismiss = "alert" >×</button>
<strong>Success!</strong> Your message has been sent successfully.
</div>
<div class = "alert alert-info alert-dismissable fade in">
<button type = "button" class = "close" data-dismiss = "alert" >×</button>
<strong>Note!</strong> Please read the comments carefully.
</div>
<div class = "alert alert-warning alert-dismissable fade in">
<button type = "button" class = "close" data-dismiss = "alert" >×</button>
<strong>Warning!</strong> There was a problem with your network.
</div>
<div class = "alert alert-danger alert-dismissable fade in">
<button type = "button" class = "close" data-dismiss = "alert" >×</button>
<strong>Error!</strong> A problem has been occurred while submitting your data.
</div>
</body>
</html>
[/html]
Output:
Success! Your message has been sent successfully.
Note! Please read the comments carefully.
Warning! There was a problem with your network.
Error! A problem has been occurred while submitting your data.
Description
To add links in Bootstrap Alerts, the class .alert-link has to be used which matches the color of the alert being used.
Example
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="alert alert-success" role="alert">
<strong>Success!</strong> Your <a href="#" class="alert-link">message</a> has been sent successfully.
</div>
<div class="alert alert-info" role="alert">
<strong>Note!</strong> Please read the <a href="#" class="alert-link">comments </a> carefully.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> There was a problem with your <a href="#" class="alert-link">network</a>.
</div>
<div class="alert alert-danger" role="alert">
<strong>Error!</strong> A <a href="#" class="alert-link">problem</a> has been occurred while submitting your data.
</div>
</body>
</html>
[/html]
Output:
Success! Your message has been sent successfully..
Note! Please read the comments carefully.
Warning! There was a problem with your network.
Error! A problem has been occurred while submitting your data.
Points
- Bootstrap Alerts are the feedback messages.
- Alerts are built with class alert using contextual classes.
- Dismissable alerts will clear the alerts by adding close and alert-dismissable classes.