Bootstrap 4 Hide Element Based On Screen Size

August 22, 2017
.hidden-* class (Bootstrap 4 Alpha) and .visible-* (Bootstrap 3) is removed.

You need to use display property, mainly d-*-none (hide) and d-*-block or d-*-inline-block (show).

If you want an element to hide on size sm and below, but visible on md, lg and xl, use d-none d-md-block.

xs (<576px) sm (≥576px) md (≥768px) lg (≥992px) xl (≥1200px)
d-none d-sm-block hide show show show show
d-none d-md-block hide hide show show show
d-none d-lg-block hide hide hide show show
d-none d-xl-block hide hide hide hide show
d-block d-xl-none show show show show hide
d-block d-lg-none show show show hide hide
d-block d-md-none show show hide hide hide
d-block d-sm-none show hide hide hide hide

Show on specific viewport size only

If you want to show on sm only but to hide on other sizes, use d-none d-sm-block d-md-none.

xs (<576px) sm (≥576px) md (≥768px) lg (≥992px) xl (≥1200px)
d-block d-sm-none show hide hide hide hide
d-none d-sm-block d-md-none hide show hide hide hide
d-none d-md-block d-lg-none hide hide show hide hide
d-none d-lg-block d-xl-none hide hide hide show hide
d-none d-xl-block hide hide hide hide show

Hide on specific viewport size only

If you want to hide on sm only but to show on other sizes, use d-block d-sm-none d-md-block.

xs (<576px) sm (≥576px) md (≥768px) lg (≥992px) xl (≥1200px)
d-none d-sm-block hide show show show show
d-block d-sm-none d-md-block show hide show show show
d-block d-md-none d-lg-block show show hide show show
d-block d-lg-none d-xl-block show show show hide show
d-block d-xl-none show show show show hide
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.