Hide the elements on certain devices. - HTML CSS Bootstrap

HTML CSS examples for Bootstrap:Grid Layout

  1. HOME
  2. HTML CSS
  3. Bootstrap
  4. Grid Layout

Introduction

Class Description
.hidden-xs Hide the elements only on extra small devices having screen width less than 768px. Visible on others.
.hidden-sm Hide the elements only on small devices having 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.

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

Class Description
.visible-print-blockHide 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.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Example of Bootstrap 3 Hidden Responsive Classes</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.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.2.0/js/bootstrap.min.js"></script>
  <style type="text/css">
    p{<!--   w  ww  . ja  v a2s  .  co  m-->
        padding: 20px;
        background: #EEEEEE;
        border-radius: 5px;
    }

</style>
 </head>
 <body>
  <div>
   <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>

Related Tutorials