×
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
2658    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.
Rabindranath Tagore
It is very simple to be happy, but it is very difficult to be simple.
Rabindranath Tagore
2038
23.88
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     30795
28/06/2017     25580
02/08/2017     22069
26/05/2018     19762
15/05/2017     19373
06/07/2017     17915
21/04/2018     16870
01/08/2017     16546
01/07/2017     14555
25/04/2018     13627
softetechnologies