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 | hide | visible |
| .hidden-print | visible | hide |
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
try it"
The results are as follows:
Checkmark (✔) indicates that the element is visible in the current viewport.