w3docs logo
  1. Snippets
  2. CSS
  3. How to Hide Elements in a Responsive Layout

How to Hide Elements in a Responsive Layout

Solutions with CSS

To hide an element in a responsive layout, we need to use the CSS display property set to its "none" value along with the @media rule. The content of the second <p> element having a "hidden-mobile" class will be hidden on devices smaller than 767px.

Example of hiding an element on extra small devices:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
      @media (max-width: 767px) {
        .hidden-mobile {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <h1>Hi</h1>
    <p>There is some text for example.</p>
    <p class="hidden-mobile">This text will be hidden on large devices.</p>
    <p>There is some text for example.</p>
  </body>
</html>

To display an element on extra small devices (phones <768px) and medium devices (desktops ≥992px) and hide it on small devices (tablets ≥768px), you need to try the following.

Example of hiding an element on small devices:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
      @media (min-width: 768px) {
        .text {
          display: none;
        }
      }
      @media (min-width: 992px) {
        .text {
          display: block;
        }
      }
    </style>
  </head>
  <body>
    <h1>Hi</h1>
    <p>There is some text for example.</p>
    <p class="text">This text will be hidden on large devices.</p>
    <p>There is some text for example.</p>
  </body>
</html>

Solutions with Bootstrap

In Bootstrap 3.4.1, we can use the "hidden-xs" class to hide an element on phones. So, in the next example, we demonstrate how a <strong> element will be hidden on extra small devices.

Example of hiding an element on extra small devices with Bootstrap:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
      body {
        background: none;
      }
    </style>
  </head>
  <body>
    <h1>Hi</h1>
    <p>There is some text for example.</p>
    <strong class="hidden-xs">This text will be hidden on phones.</strong>
    <p>There is some text for example.</p>
  </body>
</html>

In Bootstrap 4, the hidden-* (also visible-*) class does not exist any more. To hide an element on some tiers or breakpoints, you need to use the d-* display classes.

An extra small device (xs) is the default breakpoint if it is not overridden by a larger breakpoint. Thus, the -xs infix no more exists in Bootstrap 4.

In Bootstrap 4.3, to hide an element only on medium devices, use the "d-md-none" and "d-lg-block" classes.

Example of hiding an element on medium devices with Bootstrap:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <style>
      body {
        background: none;
      }
    </style>
  </head>
  <body>
    <h1>Hi</h1>
    <p>There is some text for example.</p>
    <p class="d-md-none d-lg-block">This text will be hidden on large devices.</p>
    <p>There is some text for example.</p>
  </body>
</html>
Do you find this helpful?