Lesson 10 of 39
In Progress

Utility Classes

The following class will be used 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.

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

<!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: lightblue;
    }
    .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>

Output:

KodNest bt20 2
KodNest bt22
KodNest bt21

hidden classes

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

ClassDescription
.hidden-xsHide the elements only on extra small devices with screen width less than 768px. Visible on others.
.hidden-smHide the elements only on small devices with screen width greater than or equal to 768px but less than 992px. Visible on others.
.hidden-mdHide the elements only on medium devices having screen width greater than or equal to 992px but less than 1200px. Visible on others.
.hidden-lgHide 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{
        padding: 20px;
        background: lightblue;
        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>

Output:

KodNest bt23

Show/Hide Printing

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

ClassDescription
.visible-print-blockHide block elements for Browser rendering while visible for print.
.visible-print-inlineHide inline elements for Browser rendering while visible for print.
.visible-print-inline-blockHide inline-block elements for Browser rendering while visible for print.
.hidden-printHide elements for printing while visible on Browser.
KodNest Training New Batch is starting on 19th October 2020. Attend one week free demo classes.Register Now

New Report

Close