Bootstrap Responsive utilities
They can be used for hiding and showing content in different types of devices of different sizes by using media queries. The responsive utilities are used for blocks and toggling of tables.
Consider the following table in which we have some of the responsive utilities:
| Classes | Devices |
| .visible- xs | This class is used to make an element visible on extra small device that is for the devices of less than 768px. |
| .visible- sm | This class is used to make an element visible on small device that is for the devices of more than 768px. |
| .visible- md | This class is used to make an element visible on medium device that is for the devices of from 768px to 991px. |
| .visible- lg | This class is used to make an element visible on a large device that is for the devices of more than 991px. |
| .hidden- xs | This class is used to hide an element on extra small device that is for the devices of less than 768px. |
| .hidden- sm | This class is used to hide an element on small device that is for the devices of more than 768px. |
| .hidden- md | This class is used to hide an element on medium device that is for the devices of from 768px to 991px. |
| .hidden- lg | This class is used to hide an element on a large device that is for the devices of more than 991px. |
Print Classes:
Consider the table below in which we have described the print classes in bootstrap:
| Classes | |
| .visible- print | visible to print |
| .hidden- print | visible to browser and not visible to print |
Consider the following example in which we have used all the helper classes that were described in the above table. We can test these responsive classes by running the example on different sizes of devices:
CODE:
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap Example </title>
<linkhref=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
<scriptsrc=”/scripts/jquery.min.js”></script>
<scriptsrc=”/bootstrap/js/bootstrap.min.js”></script>
</head>
<body>
<div class = “container” style = “padding: 50px;”>
<div class = “row visible-on”>
<div class = “col-xs-6 col-sm-3” style = “background-color: #DB7093;box-shadow: inset 2px -2px 2px #444, inset -2px 2px2px #444;”>
<span class = “visible-xs”>Extra small</span>
<span class = “hidden-xs”>Extra Small</span>
</div>
<div class = “col-xs-6 col-sm-3” style = “background-color: #C71585;box-shadow: inset 2px -2px 2px #444, inset -2px 2px2px #444;”>
<span class = “visible-sm”>Small</span>
<span class = “hidden-sm”>Small</span>
</div>
<div class = “clearfix visible-xs”></div>
<div class = “col-xs-6 col-sm-3” style = “background-color: #C71585;box-shadow: inset 2px -2px 2px #444, inset -2px 2px2px #444;”>
<span class = “hidden-md”>Medium</span>
<span class = “visible-md”>Medium</span>
</div>
<div class = “col-xs-6 col-sm-3” style = “background-color: #DB7093;box-shadow: inset 2px -2px 2px #444, inset -2px 2px2px #444;”>
<span class = “visible-lg”>Large</span>
<span class = “hidden-lg”>Large</span>
</div>
</div>
</div>
</body>
</html>
The above example will generate the following result:
OUTPUT:
To test the responsive classes we run the above example on a different device or on a browser of different size. Consider the following image which shows that the above code is run on a browser of different size:
OUTPUT:
