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 |
| Small screen |
| Medium Screen |
| big screen |
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:
|.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.
The following table lists the print category. Use these to switch print content.
| .visible-print-block |
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.
The results are as follows:
Checkmark (✔) indicates that the element is visible in the current viewport.