Bootstrap Basic Tutorial

Bootstrap plugins

Bootstrap Progress Bars Bootstrap Thumbnails

Bootstrap Alerts

This chapter will explain the Warning (Alerts) and the classes provided by Bootstrap for warnings. Warning (Alerts) provides users with a way to define message styles. They provide contextual information feedback for typical user operations.

You can add an optional close button to the warning box. To create an inline cancellable warning box, please use Warning (Alerts) jQuery plugin.

You can create a <div> and add a .alert class and four contextual classes (i.e., .alert-success,.alert-info,.alert-warning,.alert-dangerone to add a basic warning box. The following example demonstrates this:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
　　　　<title>Bootstrap Example　-　Warning (Alerts)/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script>
</head>
<body>
<div class="alert alert-success">Success! The submission has been completed well.</div>
<div class="alert alert-info">Information! Please note this information.</div>
<div class="alert alert-warning">Alert! Please do not submit.</div>
<div class="alert alert-danger">Error! Please make some changes.</div>
</body>
</html>

Test to see ‹/›

The results are as follows:

Dismissible Alerts

The steps to create a dismissible alert (Dismissal Alert) are as follows:

By creating a <div> and adding a .alert class and four contextual classes (i.e., .alert-success,.alert-info,.alert-warning,.alert-danger）one to add a basic alert box.
Also add the optional to the above <div> class .alert-dismissable.
Add a close button.

The following example demonstrates this:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Dismissible Alerts</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script>
</head>
<body>
<div class="alert alert-success alert-dismissable">
	<button type="button" class="close" data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	Success! The submission was completed well.
</div>
<div class="alert alert-info alert-dismissable">
	<button type="button" class="close" data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	Information! Please note this information.
</div>
<div class="alert alert-warning alert-dismissable">
	<button type="button" class="close" data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	Alert! Please do not submit.
</div>
<div class="alert alert-danger alert-dismissable">
	<button type="button" class="close" data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	Error! Please make some changes.
</div>
</body>
</html>

Test to see ‹/›

The results are as follows:

Links in Alerts

The steps to create a link in Alerts are as follows:

By creating a <div> and adding a .alert class and four contextual classes (i.e., .alert-success,.alert-info,.alert-warning,.alert-danger）one to add a basic alert box.
Use .alert-link Entity classes to quickly provide links with matching colors.

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Links in Alerts</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script>
</head>
<body>
<div class="alert alert-success">
	<a href="#" class="alert-link">Success! The submission was completed well.</a>
</div>
<div class="alert alert-info">
	<a href="#" class="alert-link">Information! Please note this information.</a>
</div>
<div class="alert alert-warning">
	<a href="#" class="alert-link">Warning! Please do not submit.</a>
</div>
<div class="alert alert-danger">
	<a href="#" class="alert-link>Error! Please make some changes.</a>
</div>
</body>
</html>

Test to see ‹/›

The results are as follows:

Bootstrap Progress Bars Bootstrap Thumbnails