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.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Please note that in order to get better results from examples, create an 'index.html' file in your local machine, and test the codes in your local browser by changing the page size.

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>
      // show it on devices with max of 767 px and lower
      @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 shown on large devices.</p>
    <p>There is some text for example.</p>
  </body>
</html>

In the below code, the media query uses @media (max-width: 576px) to apply the styles inside the block only if the device width is less than or equal to 576 pixels. The .element class has display: none inside this media query, which means that any element with the .element class will be hidden on extra small devices.

Note that the value of 576px is commonly used as the breakpoint for extra small devices, as it corresponds to the width of most smartphones in portrait orientation. However, this value can be adjusted as needed depending on the specific design requirements.

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>
      /* Hide element on extra small devices */
      @media (max-width: 576px) {
        .element {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <h1>Hi</h1>
    <p>There is some text for example.</p>
    <p class="element">This element will be hidden on extra small 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 medium devices, but it will be shown on large devices.</p>
    <p>There is some text for example.</p>
  </body>
</html>