Bootstrap Alerts and Errors
Introduction
Bootstrap allows you to define styles for success, warning, and error messages on your website or app. In this tutorial, you will learn how to do this.
Creating a Simple Alert Message
Using the CSS class "alert," located on lines 2123 to 2175 in bootstrap.css (version 2.0.1), you can create a simple alert message. You can optionally add a close icon to it.
When you click the close icon in the alert box, the alert box closes. To achieve this interactive effect, you must include two JavaScript files, jquery.js and alert.js. You can place them before the closing body tag.
Bootstrap Example of Creating a Simple Alert Message
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic Alert Message Example</title>
<meta name="description" content="Creating basic alerts with Twitter Bootstrap. Examples of alerts and errors with Twitter Bootstrap">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">
<div class="alert">
<a class="close" data-dismiss="alert">×</a>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
</div>
</div>
</div>
<script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
</body>
</html>
Please note that the code between lines 18 and 21 is required. These are only for demonstration purposes.
Output
View Online
View the above example in a different browser window.
Extending Simple Alert Messages
By using two additional CSS classes, "alert-block" and "alert-heading," you can extend the simple alert message demonstrated earlier. This allows you better control over the text to be displayed and lets you add a text heading before the alert text.
When you click the close icon in the alert box, the alert box closes. To achieve this interactive effect, you must include two JavaScript files, jquery.js and alert.js. You can place them before the closing body tag.
Bootstrap Example of Extending Simple Alert Messages
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Extending Simple Alert Message Example</title>
<meta name="description" content="Extending simple alert with Twitter Bootstrap.">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="alert alert-block">
<a class="close" data-dismiss="alert">×</a>
<h4 class="alert-heading">Warning!</h4>
Best check yo self, you're not looking too good.
</div>
</div>
<script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
</body>
</html>
<div class="row">
<div class="span4">
<div class="alert alert-block">
<a class="close" data-dismiss="alert">×</a>
<h4 class="alert-heading">Warning!</h4>
What are you doing?! This will delete all files!!
</div>
</div>
</div>
<script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
</body>
</html>
View Online
View the above example in a different browser window.
Creating Alerts on Error, Success, and Information
Bootstrap allows you to create appropriate alerts on error or danger, success, and information. For error, you need the CSS class "alert-error". For success, you need the "alert-success" class. For information, you need the class "alert-info". Of course, as explained in the previous example, you need the JS files jquery.js and alert.js.
Bootstrap Error, Success, and Information Alerts Example
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Error, Success, and Information Alerts Example</title>
<meta name="description" content="Example alerts on error success and information with Twitter bootstrap.">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding: 50px;
}
</style>
</head>
<body>
<div class="alert alert-error">
<a class="close" data-dismiss="alert">×</a>
<strong>Error!</strong>This is a fatal error.
</div>
<div class="alert alert-success">
<a class="close" data-dismiss="alert">×</a>
<strong>Success!</strong>You have successfully done it.
</div>
<div class="alert alert-info">
<a class="close" data-dismiss="alert">×</a>
<strong>Info!</strong>Watch this, but you may forget.
</div>
<script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
</body>
</html>
Output
Click here to download all the HTML, CSS, JS, and image files used in this tutorial.