Bootstrap 4 - Hiding elements in responsive layout

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

d-block d-md-none 

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

d-none d-md-block 

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)

Comments

[Benjamin Benitez]

Thank you, this was just what I needed.

[Raj Kiran Chaudhary]

Thanks a lot. I desperately needed this