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 | showd-none d-md-block | hide | hide | show | show | showd-none d-lg-block | hide | hide | hide | show | showd-none d-xl-block | hide | hide | hide | hide | showd-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 | showd-block d-sm-none d-md-block | show| hide | show | show | showd-block d-md-none d-lg-block | show | show | hide | show | showd-block d-lg-none d-xl-block | show | show | show | hide | showd-block d-xl-none | show | show | show | show | hide