Bootstrap Responsive Utilities
Bootstrap provides some helper classes for faster mobile-friendly development. These can be used, combined with media queries, to show and hide content for large, small, and medium devices.
Use these tools with caution and avoid creating completely different versions of the same site.Responsive utilities currently only apply to block and table toggling.
| Extra small screens Phones (<768px) |
Small screens Tablets (≥768px) |
Medium screens Desktops (≥992px) |
Large screens Desktops (≥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 version 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, taking extra small screens (xs) as an example, 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, they are no longer recommended starting from v3.2.0. Except for the special case of <table>-related elements, they are largely the same as .visible-*-block.
Print classes
The table below lists the print classes. Use these to toggle content for printing.
| class | Browser | Printer |
|---|---|---|
|
.visible-print-block .visible-print-inline .visible-print-inline-block |
Hidden | Visible |
| .hidden-print | Visible | Hidden |
Example
The example below demonstrates the usage of the helper classes listed above. Resize the browser window, or load the example on different devices, to test the responsive utility classes.
Example
Try it Yourself »
The result is shown below:
Checkmark (✔)Indicates that the element is visible in the current viewport.
Other extensions