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.

Example

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.

<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>

Demo

Checkmarks indicate the element is visible in your current viewport.

Bootstrap Responsive Utilities