Bootstrap Tutorial - Bootstrap Utility Class








We can use the following classes to enable the visibility of elements on devices that screen sizes falls with the specific range.

.visible-*-* classes come in three variations, one for each CSS display property value: inline, block and inline-block.

Class Description
.visible-xs-* Makes the element visible only on extra small devices with screen width less than 768px. Hidden on others.
.visible-sm-* Makes the element visible only on small devices with screen width greater than or equal to 768px but less than 992px. Hidden on others.
.visible-md-* Makes the element visible only on medium devices with screen width greater than or equal to 992px but less than 1200px. Hidden on others.
.visible-lg-* Makes the element visible only on large devices having screen width greater than or equal to 1200px. Hidden on others.

We can mix the above classes to make the elements visible on multiple devices.

We can apply the class .visible-xs-* and .visible-md-* on any element to make it visible on extra small and medium devices.

<!--  w ww .j  ava 2s  . co  m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    p{
        padding: 10px;
        background: #EEEEEE;
    }
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <p class="visible-xs">
    This paragraph is visible only on <strong>Extra Small Devices</strong> 
    that has screen width less than <code>768px</code>.</p>
    <p class="visible-sm">
    This paragraph is visible only on <strong>Small Devices</strong> 
    that has screen width greater than equal to <code>768px</code> but less than <code>992px</code>.</p>
    <p class="visible-md">This paragraph is visible only on <strong>Medium Devices</strong> 
    that has screen width greater than or equal to <code>992px</code> but 
    less than <code>1200px</code>.</p>
    <p class="visible-lg">This paragraph is visible only on <strong>Large Devices</strong> that 
    has screen width greater than or equal to <code>1200px</code>.</p>
</div>
</body>
</html>

Click to view the demo





hidden classes

We can use the following hidden classes to hide the elements on certain devices.

Class Description
.hidden-xs Hide the elements only on extra small devices with screen width less than 768px. Visible on others.
.hidden-sm Hide the elements only on small devices with screen width greater than or equal to 768px but less than 992px. Visible on others.
.hidden-md Hide the elements only on medium devices having screen width greater than or equal to 992px but less than 1200px. Visible on others.
.hidden-lg Hide the elements only on large devices having screen width greater than or equal to 1200px. Visible on others.

We can mix the above classes to make the elements hidden on multiple devices.

We can apply the class .hidden-xs and .hidden-md on any element to make it hidden on extra small and medium devices.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    p{<!--from   w w  w.ja v  a2 s  .c  om-->
        padding: 20px;
        background: #E6E6FA;
        border-radius: 5px;
    }
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <p class="hidden-xs">This paragraph is hidden only on <strong>Extra Small Devices</strong> that 
    has screen width less than <code>768px</code>.</p>
    <p class="hidden-sm">This paragraph is hidden only on <strong>Small Devices</strong> that has 
    screen width greater than equal to <code>768px</code> but less than <code>992px</code>.</p>
    <p class="hidden-md">This paragraph is hidden only on <strong>Medium Devices</strong> that has 
    screen width greater than or equal to <code>992px</code> but less than <code>1200px</code>.</p>
    <p class="hidden-lg">This paragraph is hidden only on <strong>Large Devices</strong> that has 
    screen width greater than or equal to <code>1200px</code>.</p>
</div>
</body>
</html>

Click to view the demo





Show/Hide Printing

We can use the following utility classes to show or hide certain elements for printing purpose.

Class Description
.visible-print-block Hide block elements for Browser rendering while visible for print.
.visible-print-inline Hide inline elements for Browser rendering while visible for print.
.visible-print-inline-block Hide inline-block elements for Browser rendering while visible for print.
.hidden-print Hide elements for printing while visible on Browser.