Bootstrap gives some modest bunch helper classes, for quicker mobile-friendly development. These can be utilized for appearing and hiding content by device by means of the media query, consolidated with extensive, little, and medium gadgets.
Responsive utilities are currently only 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 |
Here is the example that explains the use of above-listed Helper Class :-
<div class = "contafromer">
<div class = "row visible-on">
<div class = "col-xs-6 col-sm-3">
<span class = "hidden-xs">Extra small</span> <!-- This will hide from xs screen -->
<span class = "visible-xs"> Visible on x-small</span> <!-- This will display from xs screen -->
</div>
<div class = "col-xs-6 col-sm-3">
<span class = "hidden-sm">Small</span> <!-- This will hide from sm (small) screen -->
<span class = "visible-sm"> Visible on small</span> <!-- This will display from xs screen -->
</div>
<div class = "clearfix visible-xs"></div>
<div class = "col-xs-6 col-sm-3">
<span class = "hidden-md">Medium</span> <!-- This will hide from md (medium) screen -->
<span class = "visible-md"> Visible on medium</span> <!-- This will be visible from md (medium) screen -->
</div>
<div class = "col-xs-6 col-sm-3">
<span class = "hidden-lg">Large</span> <!-- This will hide from md (large) screen -->
<span class = "visible-lg"> Visible on large</span> <!-- This will be visible from md (large) screen -->
</div>
</div>
</div>
0 Comment(s)