Hiding div elements in a responsive layout using bootstrap classes:
We can easily hide a div block on a particular layout like for extra small devices(mobile) or for tablets or for desktop using bootstrap classes.
| 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 |
Example:
<div class="container s1">
<div class="row ">
<div class="col-lg-6 col-md-2 col-sm-4 col-xs-6 bg ">
<p>James<p>
<img src="img/team-1.png">
</div>
<div class="col-lg-6 col-md-2 col-sm-4 col-xs-6 bg ">
<p>Mickey<p>
<img src="img/team-2.png">
</div>
<div class="col-lg-6 col-md-2 col-sm-4 col-xs-6 bg hidden-xs">
<p>Randy<p>
<img src="img/team-3.png">
</div>
<div class="col-md-2 bg hidden-sm hidden-lg hidden-xs">
<p>John<p>
<img src="img/team-4.png">
</div>
<div class="col-md-2 bg hidden-sm hidden-lg hidden-xs">
<p>Smith<p>
<img src="img/team-2.png">
</div>
<div class="col-md-2 bg hidden-sm hidden-lg hidden-xs">
<p>Michael<p>
<img src="img/team-1.png">
</div>
</div>
</div>
In the above example we are hiding some blocks for small, large and extra small devices and some for only mobile devices(< 768).
0 Comment(s)