Bootstrap Responsive Utilities

For more rapidly mobile-friendly development Bootstrap offers a number of handful helper classes. These classes can be used for hiding and showing content on by device using media query combined with small, medium and large devices. Use these classes carefully and avoid creating completely different versions of the similar site. Bootstrap responsive utilities are presently simply 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

Below table is listing the print classes. For print the content use these for toggling.

Classes Print
.visible-print Yes Visible for Printing
.hidden-print Only Visible to browser not for print.


Below mentioned example demonstrates the make use of top listed helper classes. Resize your browser window or run these examples on different resolutions or devices to check the responsive utility classes.

Checkmarks indicate the element is visible in your current viewport.

Leave a Reply

Your email address will not be published. Required fields are marked *