DEV Community

Alexandre Freire
Alexandre Freire

Posted on

Bootstrap 4 - Hiding elements in responsive layout

CSS class to hide on medium, large and extra large devices.

d-block d-md-none 
Enter fullscreen mode Exit fullscreen mode

CSS class to hide on small and extra-small devices.

d-none d-md-block 
Enter fullscreen mode Exit fullscreen mode

Alt Text

Note that you can also inline by replacing d--block with d--inline-block

Old answer: Bootstrap 4 Alpha

  • You can use the classes .hidden-*-up to hide on a given size and larger devices

.hidden-md-up to hide on medium, large and extra large devices.

  • The same goes with .hidden-*-down to hide on a given size and smaller devices

.hidden-md-down to hide on medium, small and extra-small devices

  • visible-* is no longer an option with bootstrap 4

  • To display only on medium devices, you can combine the two:

hidden-sm-down and hidden-xl-up

The valid sizes are:

xs for phones in portrait mode (<34em)
sm for phones in landscape mode (≥34em)
md for tablets (≥48em)
lg for desktops (≥62em)
xl for desktops (≥75em)

Top comments (2)

Collapse
 
benjami51033333 profile image
Benjamin Benitez

Thank you, this was just what I needed.

Collapse
 
keeran_raaj profile image
Raj Kiran Chaudhary

Thanks a lot. I desperately needed this