Bootstrap | Responsive utilities

Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this tutorial guide, we are going to be discussing about Bootstrap Responsive utilities.

Bootstrap gives some helper classes, for a faster mobile-friendly development. These can be used for showing and hiding content by device using media query, combined with large, small, and medium devices.

Make use of these classes infrequently and avoid creating entirely different versions of the same website. Responsive utilities are only currently 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

READ: Bootstrap | Helper Classes

Print Classes

Following table lists the print classes. Use these for toggling the content for print.

Classes	Print
.visible-print	Yes Visible
.hidden-print	Visible only to browser not to print.

Example

The following example below demonstrates the use of the above listed helper 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

When the above example is executed, it will produce the following result -

  
? Visible on x-small
Small
Medium
Large

Checkmarks indicates that the element is visible in your current viewport.

READ: Bootstrap | Buttons

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Glyphicons.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.