JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

Bootstrap Alerts

June 26, 2014 by Krishna Srinivasan Leave a Comment

In general term, alert is a warning for a problem. Alerts provide information about security issues, vulnerabilities and exploits. Alert messages are often used to specify attention of the end users such as warning messages, confirmation messages, error messages etc. Using alert messages we can add dismiss functionality to all alert messages. Bootstrap provides different ways to style messages to the user.

We can create alert message by wrapping with div element along with .alert class and using one of the four contextual classes. Following are the four contextual classes which are used to create different types of alert messages with Bootstrap:

  • alert-success: To indicate success message.
  • alert-info: To define informational message.
  • alert-warning: To indicate warning message.
  • alert-danger: To specify an error message.

also read:

  • Bootstrap Setup
  • Bootstrap Typography

The following example demonstrates use of different techniques used for implementing the alerts in Bootstrap. If you have any questions about bootstrap alerts, please write it in the comments section.

Bootstrap Alert Example

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Alert Messages</h2>
<div class="alert alert-success">Success! message sent successfully.</div>
<div class="alert alert-info">Info! Please read carefully.</div>
<div class="alert alert-warning">Warning! It will delete all the files.</div>
<div class="alert alert-danger">Error! There is error in downloading file. Please try again.</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Basic Alert Messages Example Demo

Bootstrap Basic Alert Messages Example

Bootstrap Dismissal Alerts

By using above four contextual classes, we can create dismissal alert messages by wrapping within the div element along with .alert base class. To perform this task, just simply add the .alert-dismissable class to the div element as shown in the below example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dismissal Alert Messages</h2>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
Success! message sent successfully.
</div>
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
Info! Please read carefully.
</div>
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
Warning! It will delete all the files.
</div>
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
Error! There is error in downloading file. Please try again.
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Dismissal Alert Messages Example Demo

Bootstrap Dismissal Alert Messages Example

Bootstrap Alerts in Links

By using above four contextual classes, we can create links in alert messages by wrapping within the div element along with .alert base class. Simply add .alert-link class to provide links within any alert as shown in the below example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Links in Alert Messages</h2>
<div class="alert alert-success">
Success! <a href="#" class="alert-link">click to see message.</a>
</div>
<div class="alert alert-info">
Info! <a href="#" class="alert-link">click to see information message.</a>
</div>
<div class="alert alert-warning">
Warning! <a href="#" class="alert-link">click to see warning message.</a>
</div>
<div class="alert alert-danger">
Error! <a href="#" class="alert-link">click to see an error message.</a>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Links Alert Messages Example Demo

Bootstrap Links Alert Messages Example

Filed Under: Bootstrap Tagged With: Bootstrap Components

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved