Bootstrap provides some handful helper classes, for faster mobile-friendly development. These can be used for showing and hiding content by device via media query, combined with large, small, and medium devices.
Use these sparingly and avoid creating entirely different versions of the same site. Responsive utilities are currently only available for block and table toggling.
Use these sparingly and avoid creating entirely different versions of the same site. Responsive utilities are currently only available for block and table toggling.
| Classes | Devices |
|---|---|
| .visible-xs | Extra small (less than 768px) visible |
| .visible-sm | Small (up to 768 px) visible |
| .visible-md | Medium (768 px to 991 px) visible |
| .visible-lg | Larger (992 px and above) visible |
| .hidden-xs | Extra small (less than 768px) hidden |
| .hidden-sm | Small (up to 768 px) hidden |
| .hidden-md | Medium (768 px to 991 px) hidden |
| .hidden-lg | Larger (992 px and above) hidden |
Print Classes
The following table lists the print classes. Use these for toggling the content for print.| Classes | |
|---|---|
| .visible-print | Yes Visible |
| .hidden-print | Visible only to browser not to print. |
Example
The following example demonstrates the use of above listed helper classes. Resize your browser or load the example on different devices to test the responsive utility classes.<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">Extra small</span>
<span class = "visible-xs">✔ Visible on x-small</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</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">✔ Visible on medium</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</span>
</div>
</div>
</div>
output
Extra small ✔ Visible on x-small
Small ✔ Visible on small
Medium ✔ Visible on medium
Large ✔ Visible on large
