Bootstrap Basic Tutorial

Bootstrap Plugins

Bootstrap Responsive Utilities Bootstrap Images

Bootstrap Helper Classes

This chapter will discuss some auxiliary classes that may be useful in Bootstrap.

Text

The following different classes show different text colors. If the text is a link, the text will become darker when the mouse is moved over it:

Class	Description	Example
.text-muted	"text-Text style of the "muted" class	Try it
.text-primary	"text-Text style of the "primary" class	Try it
.text-success	"text-Text style of the "success" class	Try it
.text-info	"text-Text style of the "info" class	Try it
.text-warning	"text-Text style of the "warning" class	Try it
.text-danger	"text-Text style of the "danger" class	Try it

Background

The following different classes show different background colors. If the text is a link, the text will become darker when the mouse is moved over it:

Class	Description	Example
.bg-primary	Table cells use "bg-primary" class	Try it
.bg-success	Table cells use "bg-success" class	Try it
.bg-info	Table cells use "bg-info" class	Try it
.bg-warning	Table cells use "bg-warning" class	Try it
.bg-danger	Table cells use "bg-"danger" class	Try it

Other

Class	Description	Example
.pull-left	Elements float to the left	Try it
.pull-right	Elements float to the right	Try it
.center-block	Set the element to display:block and center it	Try it
.clearfix	Remove float	Try it
.show	Force elements to be displayed	Try it
.hidden	Force elements to be hidden	Try it
.sr-only	Hide elements on other devices except screen readers	Try it
.sr-only-focusable	with .sr-only class combined, displayed when the element gets focus (such as: keyboard operation users)	Try it
.text-hide	Replace the text content of the page element with a background image	Try it
.close	Display close button	Try it
.caret	Display dropdown functionality	Try it

More examples

close icon

Use the universal close icon to close modal and alert boxes. Use class close gets the close icon.

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Close icon</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>
<p>Close icon example
	<button type="button" class="close" aria-hidden="true">×</button>
</p>
</body>
</html>

Test to see ‹/›

The results are as shown below:

aria-hidden="true" is mainly to help people with disabilities (such as the blind) use reading devices (automatically read content and automatically play it), it will automatically skip when playing to the content with this attribute, so as not to confuse people with disabilities!

insertion point

Use the insertion point to represent dropdown functionality and direction. Use class caret of the <span> element gets this feature.

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Insertion point</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>
<p>Insertion point example
	<span class="caret"></span>
</p>
</body>
</html>

Test to see ‹/›

The results are as shown below:

Quick float

You can use class pull-left or pull-right to float elements to the left or right. The following examples demonstrate this.

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Quick float</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="pull-left">
	Float to the left quickly
</div>
<div class="pull-right">
	Float to the right quickly
</div>
</body>
</html>

Test to see ‹/›

The results are as shown below:

To align components in the navigation bar, please use .navbar-left or .navbar-right instead. Please see Bootstrap Navbar.

Content centered

Use class center-block to center elements.

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Example　-　Center content block</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="row">
	<div class="center-block" style="width:200px;background-color:#ccc;">
		This is center-block example
　　　	</div>
</div>
</body>
</html>

Test to see ‹/›

The results are as shown below:

Remove float

To remove the float of an element, please use .clearfix class.

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Example　-　Remove float</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="clearfix" style="background: #D8D8D8;border:　1px solid #000;padding:　10px;">
	<div class="pull-left" style="background:#58D3F7">
　　　　　　	Float to the left quickly
　　　	</div>
　　　	<div class="pull-right" style="background: #DA81F5">
　　　　　　	Float to the right quickly
　　　	</div>
</div>
</body>
</html>

Test to see ‹/›

The results are as shown below:

Show and hide content

You can use the class .show and .hidden To force an element to be displayed or hidden (including screen readers).

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Example　-　Show and hide content/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="row" style="padding:　91px　100px　19px　50px;">
	<div class="show" style="margin-left:10px;width:300px;background-color:#ccc;">
　　　　　　	This is an example of the show class
　　　	</div>
　　　	<div class="hidden" style="width:200px;background-color:#ccc;">
　　　　　　	This is an example of the hide class
　　　	</div>
</div>
</body>
</html>

Test to see ‹/›

The results are as shown below:

Screen Reader

You can use the class .sr-only To hide elements from all devices except screen readers.

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Example　-　Screen Reader</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="row" style="padding:　91px　100px　19px　50px;">
	<form class="form-inline" role="form">
		<div class="form-group">
			<label class="sr-only" for="email">Email address</label>
			<input type="email" class="form-control" placeholder="Enter email">
		</div>
		<div class="form-group">
			<label class="sr-only" for="pass">Password</label>
			<input type="password" class="form-control" placeholder="Password">
		</div>
	</form>
</div>
</body>
</html>

Test to see ‹/›

The results are as shown below:

Here, we see two label tags of type input both with the class sr-onlyTherefore, the tags will only be visible to screen readers.

Bootstrap Responsive Utilities Bootstrap Images