loading...

Bootstrap 4 - Hiding elements in responsive layout

alexandrefreire profile image Alexandre Freire ・1 min read

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 

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)

Posted on by:

alexandrefreire profile

Alexandre Freire

@alexandrefreire

CST em Análise e Desenvolvimento de Sistemas

Discussion

markdown guide