Bootstrap provides numerous classes to help provide hints as to what content you should/shouldn’t show to users, based upon the size of their device.
Using a prefix of visible- or hidden-, you can define if an element should be shown to a user or not the based upon the size of the user’s display device.
- Xs: extra small devices (eg. Phones (<768px))
- Sm: small devices (eg. Tablets (≥768px))
- Md: Medium devices (eg. Desktops (≥992px))
- Lr: Large devices (eg. Desktops (≥1200px))
These would be manifest in classes like:
- .visible-xs – visible on extra small devices, but hidden on others
- .hidden-md – hidden on medium devices, but visible on others
This can be used to hide complex forms that you don’t want to show mobile users, or to make visible on small devices information that only mobile users would care about.
You can combine these classes in a single element, so something is hidden on two or more device types. For example:
Hide on small and extra small devices, visible on larger devices
Handling Print
Additionally you can hide information when printed, or make it displayed when printed.
For example, you may not want your navigation, or certain other elements, to print when someone prints your webpage. Therefore you add the class .hidden-print to the element, and it won’t print when if the user prints your webpage.
On the other hand, you may want an element to be hidden when viewed on your web page in the browser, but displayed when you print. In that case, use .visible-print on your element. Like you see below:
This is only seen in the browserThis is only seen when printed
Responsive Utilities was originally found on Access 2 Learn
