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.
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 |
Print Classes
Following table lists the print classes. Use these for toggling the content for print.
Classes | |
---|---|
.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-smallSmallMediumLarge
Checkmarks indicates that the element is visible in your current viewport.
READ: Bootstrap | Buttons
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.
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.