YouTip

# Bootstrap Responsive Utilities Bootstrap provides some helper classes to facilitate faster mobile-friendly development. These can be used in conjunction with media queries to show and hide content on devices based on screen size (large, small, or medium). Use these utilities with caution to avoid creating completely different versions of the same site. **Responsive utilities are currently only applicable to block and table toggles.** | | Extra small screen Phone (<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 | Starting from v3.2.0, classes like .visible-*-* have three variants for each screen size, each targeting a different CSS display property, as listed below: | Class Group | CSS display | | --- | --- | | .visible-*-block | display: block; | | .visible-*-inline | display: inline; | | .visible-*-inline-block | display: inline-block; | Therefore, for extra small screens (xs), the available .visible-*-* classes are: .visible-xs-block, .visible-xs-inline, and .visible-xs-inline-block. The .visible-xs, .visible-sm, .visible-md, and .visible-lg classes also exist. However, starting from v3.2.0, they are no longer recommended. Except for the special case of related elements, they are largely the same as .visible-*-block. ## Print Classes The following table lists the print classes. Use these to toggle print content. | class | Browser | Printer | | --- | --- | --- | | .visible-print-block .visible-print-inline .visible-print-inline-block | Hidden | Visible | | .hidden-print | Visible | Hidden | ## Examples The following examples demonstrate the usage of the helper classes listed above. Resize the browser window or load the examples on different devices to test the responsive utility classes. ## Example [Try it »](#) The result is shown below:  **The checkmark (✔)** indicates that the element is visible in the current viewport.