In one of our previous posts we have discussed about Controlling Size and Placement in BootStrap, but beyond just simply controlling size and placement, one of the other things that is going to vary depending on the screen size and maybe even the mode is going to be visibility. Lets say for example you do not want to show some some data in the small screen devices to save some space, then you can use this awesome feature of bootstrap. That means depending on device type you want to show/hide different items can be done using Bootstrap very easily.
Bootstrap have two options to control visibility, Visible - Hidden by default and Hidden - Visible by default. So for example if we say hidden-lg that means it is going to be hidden for large devices but it will be visible by default in any other devices. Similarly .visible-lg-* is going to visible only in large devices but will be hidden in all other devices.
Bootstrap have two options to control visibility, Visible - Hidden by default and Hidden - Visible by default. So for example if we say hidden-lg that means it is going to be hidden for large devices but it will be visible by default in any other devices. Similarly .visible-lg-* is going to visible only in large devices but will be hidden in all other devices.
Available Classes :
The different options with visible classes are block, inline, inline-block. For example .visible-lg-block will render as display : block in CSS.
Print Classes -
- .visible-print-block - Will be hidden in browser but visible when printing.
- .visible-print-inline - Will be hidden in browser but visible when printing.
- .visible-print-inline-block - Will be hidden in browser but visible when printing.
- .hidden-print - Will be visible in browser but hidden when printing.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1 class="visible-lg-block">Large Devices</h1>
<h1 class="visible-md-block">Medium Devices</h1>
<h1 class="visible-sm-block">Small Devices</h1>
<h1 class="visible-xs-block">Extra Small Devices</h1>
<h1 class="visible-print-block">Print</h1>
</div>
</body>
Result :
Please Like and Share the Blog, if you find it interesting and helpful.
I am no longer сertain the place you are getting
ReplyDeleteyouur info, ɦowever great topic. ӏ muѕt
spend somе tіmе learning more or ԝorking օut moгe.
Thаnks forr excellent іnformation I was on tthe lookout for this info
fοr my mission.
Αlso visit mу blog post; losing weight faster