Bootstrap 4 - hidden classes - only hide on small screens

Question

How to hide span content only on small (sm) screens? I need this content visible on xs screens.

Answer 1

It's quite easy. All you have to know is, how to use bootstrap 4 classes properly.

Reference: https://getbootstrap.com/docs/4.0/utilities/display/

First think as it's divide into three ordered groups. (When some group is not applicable omit that group)

(hide_lower_limit) (display_size) (hide_upper_limit)

1. (hide_lower_limit): has only one class .d-none

2. (display_size): sizes to be visible (not-hide), eg: .d-sm-block, .d-md-block. It will have a format of .d--block

3. (hide_upper_limit): the upper limit which should be hidden. This has a format of .d--none

---

Let's look into some examples

Q1: Display on md and bigger.

ans:

Start with visible screen size, (display_size): .d-md-block.

Then think of all screen sizes which should be hidden, ie, all screen sizes

• smaller than md hidden, (hide_lower_limit): .d-none
• bigger than md not hidden, (hide_upper_limit):

d-none d-md-block

Q2: Display on sm and smaller.

ans: (display_size): .d-sm-block.

Hidden screen sizes

• smaller than sm not hidden, (hide_lower_limit):
• bigger than sm hidden, (hide_upper_limit): .d-md-none

d-sm-block d-md-none

Q3: Visible only in sm and md.

ans: (display_size): .d-sm-block .d-md-block.

Hidden screen sizes

• smaller than sm hidden, (hide_lower_limit): .d-none
• bigger than sm hidden, (hide_upper_limit): .d-lg-none

d-none d-md-block d-sm-block d-lg-none