Bootstrap basic tutorial

Bootstrap plugins

Bootstrap Glyphicons Bootstrap Helper Classes

Bootstrap Responsive Utilities

Bootstrap provides some helper classes to facilitate the development of mobile-friendly interfaces. These can be combined with media queries for large, small, and medium devices to hide or display content based on the device's display.

Use these tools with caution to avoid creating completely different versions on the same site.Responsive utility tools are currently only applicable to block and table switches.

	Ultra-small screen Mobile (<768px)	Small screen Tablet (≥768px)	Medium screen Desktop (≥992px)	Large screen Desktop (≥1200px)
.visible-xs-*	Visible	Hidden	Hidden	Hidden
.visible-sm-*	Hidden	Visible	Hidden	Hidden
.visible-md-*	Hidden	Hidden	Visible	Hidden
.visible-lg-*	Hidden	Hidden	Hidden	Visible
.hidden-xs	Hidden	Visible	Visible	Visible
.hidden-sm	Visible	Hidden	Visible	Visible
.hidden-md	Visible	Visible	Hidden	Visible
.hidden-lg	Visible	Visible	Visible	Hidden

From v3.2Starting from version .0, classes like .visible-*-* There are three variants for each screen size, each corresponding to a different display property in CSS, as listed below:

class group	CSS display
.visible-*-Block	display: block;
.visible-*-Inline	display: inline;
.visible-*-Inline-Block	display: inline;-block;

Therefore, for example, with extra small screens (xs), the available .visible-*-* classes are: .visible-xs-block, .visible-xs-inline and .visible-xs-Inline-block.

.visible-xs, .visible-sm, .visible-md and .visible-lg classes. However, from v3.2.0 version and later is no longer recommended for use. Exceptions exist for special cases related to <table> elements, but they are also available alongside .visible-*-Block is largely the same.

Print Classes

The following table lists the print classes. Use these switches to toggle the printing content.

Class	Browser	Printer
.visible-Print-Block .visible-Print-Inline .visible-Print-Inline-Block	Hidden	Visible
.hidden-Print	Visible	Hidden

Online Example

The following examples demonstrate the usage of the helper classes listed above. Adjust the browser window size or load the examples on different devices to test the responsive utility classes.

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Example　-　Responsive Utility Tools</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="container" style="padding:　40px;">
	<div class="row visible-on">
		<div class="col-xs-6　col-sm-3" style="background-color: #dedef8;box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
			<span class="hidden-xs">Extra small</span>
			<span class="visible-xs">✔ Visible on extra small devices</span>
		</div>
		<div class="col-xs-6　col-sm-3" style="background-color: #dedef8;box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
			<span class="hidden-sm">Small</span>
			<span class="visible-sm">✔ Visible on small devices</span>
		</div>
		<div class="clearfix visible-xs"></div>
		<div class="col-xs-6　col-sm-3" style="background-color: #dedef8;box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
			<span class="hidden-md">Medium</span>
			<span class="visible-md">✔ Visible on medium devices</span>
		</div>
		<div class="col-xs-6　col-sm-3" style="background-color: #dedef8;box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
			<span class="hidden-lg">Large</span>
			<span class="visible-lg">✔ Visible on large devices</span>
		</div>
	</div>
</div>
</body>
</html>

Test and see ‹/›

The results are as follows:

Checkmark (✔) Indicates that the element is visible in the current viewport.

Bootstrap Glyphicons Bootstrap Helper Classes