×
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
3198    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
Every child comes with the message that God is not yet discouraged of man.
Rabindranath Tagore
1710
37.44
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     34150
28/06/2017     30661
26/05/2018     29689
02/08/2017     28553
25/06/2018     24870
15/05/2017     24337
01/08/2017     23029
06/07/2017     22865
21/04/2018     19069
14/07/2017     18088
softetechnologies