Bootstrap 3 - SPLessons

Bootstrap Alerts

Chapter 19

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Bootstrap Alerts

Bootstrap Alerts

shape 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

Types of Alerts

shape Description

Alerts are of various types. All these use contextual classes.

Information Alerts

This alert is used to provide any important information to the user by adding the class .alert-info to the .alert base class.

Success/Confirmation Alerts

To give success or confirmation alerts, add contextual class .alert-success to the .alert base class.

Error/Danger Alerts

The class .alert-danger is added to the .alert base class to display error alerts.

Warning Alerts

Add contextual class .alert-warning to the .alert base class to display warning alert message.

shape Example

<!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>

Output:

Dismissal Alerts

shape 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.

shape Example

<!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" >&times;</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" >&times;</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" >&times;</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" >&times;</button>
	     <strong>Error!</strong> A problem has been occurred while submitting your data.
	</div>

</body>
</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.

shape Description

To add links in Bootstrap Alerts, the class .alert-link has to be used which matches the color of the alert being used.

shape Example

<!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>

Output:

Summary

shape 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.