a blog for those who code

Thursday 2 July 2015

Controlling Visibility in BootStrap

In this post we are going to discuss and learn about how to control visibility in bootstrap. In Bootstrap you will find some handful helper classes which will help you for faster mobile-friendly UI development. These are useful classes which can be used for showing and hiding content by device via media query.

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.

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">
    <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>

    <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>

Result :

Please Like and Share the Blog, if you find it interesting and helpful.

1 comment:

  1. I am no longer сertain the place you are getting
    youur 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