1. Home
  2. Bootstrap Responsive Utilities

The best Bootstrap Responsive Utilities Tutorial In 2024, In this tutorial you can learn Print category,Examples,Examples,

Bootstrap Responsive Utilities

Bootstrap provides some helper classes in order to achieve development for mobile devices friendly faster. These queries can combine large, small and medium-sized equipment through the media, to realize the contents of the device to show and hide.

Using these tools need to be careful to avoid creating a completely different versions of the same site.Responsive utility is currently only available in blocks and table switching.

Ultra-small screen
Phone (<768px) 		Small screen
Tablet (≥768px) 		Medium Screen
Desktop (≥992px) 		big screen
Desktop (≥1200px)
.visible-xs- * visible hide hide hide
.visible-sm- * hide visible hide hide
.visible-md- * hide hide visible hide
.visible-lg- * hide hide hide visible
.hidden-xs hide visible visible visible
.hidden-sm visible hide visible visible
.hidden-md visible visible hide visible
.hidden-lg visible visible visible hide

From v3.2.0 release, shaped like .visible - * - * class size for each screen has three variants, each for a different CSS display property list is as follows:

Clusters CSS display
.visible - * - block display: block;
.visible - * - inline display: inline;
.visible - * - inline-block display: inline-block;

Therefore, the ultra-small screen (xs), for example, 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 also exist. But from the beginning v3.2.0 version is no longer recommended. In special cases <table> elements related to outside, they .visible - * - block same.

Print category

The following table lists the print category. Use these to switch print content.

class Browser printer
.visible-print-block
.visible-print-inline
.visible-print-inline-block 		visible
.hidden-print visible

Examples

The following example demonstrates listed above helper class usage. Adjust the size of the browser window, or load instances on different devices, test responsive utility class.

Examples

<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"> special mini </ span> <Span class = "visible-xs"> ✔ in particular small devices visible </ 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"> ✔ on a midrange device visible </ 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 equipment </ span> </ Div> </ Div> </ Div>

The results are as follows:

Responsive Utilities

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

Hot Tools

Other Tools

Online Tutorial

Website Navigation

Bootstrap Responsive Utilities
10/30