Responsive Utilities

ByWalter Wimberly

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 browser


This is only seen when printed

Responsive Utilities was originally found on Access 2 Learn

Assistant Professor

Walter Wimberly is an Assistant Professor at a regional college in Tennessee, teaching Computer Science in the Software Engineering track. He works as a student advisor, oversees curriculum changes, develops new courses, and manages the advisory panel.
Walter taught full time for about 7 years, before going back into “industry” as a full stack Software Developer for a dozen years. There he focused on web based projects coding in JavaScript/jQuery and utilizing the Bootstrap CSS Framework on the front-end, and coding in PHP, ASP/ASP.Net, SQL on the back-end.

Since he loves teaching, he taught as an adjunct web and digital media classes for eight (8) years, while working in industry, and has since returned to teaching full time.

He has been married for over 25 years, and is father to several special needs boys. As such, he is working on some projects to help others who have special needs to be self-sufficient, and support the care givers of those with special needs. Check out his Autism blog for more info.

Similar Posts