×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Bootstrap Buttons Group with examples Bootstrap Labels [ use of .label class ]
Bootstrap Alert [Success | Info | Warning | Danger] - Bootstrap 3
3427    Arnab De    17/05/2017

Bootstrap Alert

We can display alert by predefined classes in bootstrap. Bootstrap Alert is a very useful component to display different messages to user. Four types of alert are possible in bootstrap.

 

  • Success
  • Info
  • Warning
  • Danger
softetechnologies

Alerts are designed with .alert class. After using the .alert class we must use one of the following class

  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger

<div class="alert alert-success">
<strong> Success! </strong> display some successful information to the user.
</div>
<div class="alert alert-info">
<strong> Info! </strong> display some information to the user.
</div>

<div class="alert alert-warning">
<strong> Warning! </strong> display some warning to the user.
</div>

<div class="alert alert-danger">
<strong> Danger! </strong>display some message to the user that indicates a malfunction.
</div>

Bootstrap Alert
Bootstrap Alert

Closing Bootstrap Alert

By default the alert class is not dismissible. But we can make it dismissible by using a link or button with .close class and data-dismiss=”alert”

softetechnologies

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Alert Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>

<div class="container">
<div class="alert alert-success" role="alert">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
You Are <strong>Successfully</strong> Loged In
</div>
</div>
</body>
</html>

Basic Alerts Close Button
Basic Alerts Close Button

Animated Bootstrap Alert

Animation when dismiss the alert are possible. For that we have to use the .fade class and .in class in the alert div.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Alert Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="alert alert-danger fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong> Danger! </strong> display some message to the user that indicate a malfunction.
</div>
</div>
</body>
</html>

Insert link in Bootstrap Alert

link to the another image, page or anything is also possible in Bootstrap Alerts by .alert-link class.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Alert Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<div class="alert alert-success" role="alert">

<strong>Well Come!</strong> Learn Bootstrap from <a href="#" class="alert-link">Tutorial At Home </a>

</div>

<div class="alert alert-info" role="alert">

<strong>Well Come!</strong> Learn Bootstrap from <a href="#" class="alert-link">Tutorial At Home </a>

</div>

<div class="alert alert-warning" role="alert">

<strong>Well Come!</strong> Learn Bootstrap from <a href="#" class="alert-link">Tutorial At Home </a>

</div>

<div class="alert alert-danger" role="alert">
<strong>Well Come!</strong> Learn Bootstrap from <a href="#" class="alert-link">Tutorial At Home </a>
</div>
</div>
</body>
</html>

Alerts Link
Alerts Link

Heading of an alert [ .alert-heading ]

We can also set a heading using .alert-heading class.

softetechnologies

<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Tutorial At Home</h4>
<p> On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
</p>
</div>

Alerts Heading
Alerts Heading
Bootstrap Buttons Group with examples Bootstrap Labels [ use of .label class ]
softetechnologies
Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
Enter New Comment
Comment History
No Comment Found Yet.
Aristotle
Educating the mind without educating the heart is no education at all.
Aristotle
619
44.84
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     36643
01/01/2018     34919
28/06/2017     32371
02/08/2017     30444
25/06/2018     30139
15/05/2017     25394
01/08/2017     24683
06/07/2017     24582
14/07/2017     20190
21/04/2018     19829
softetechnologies