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

Reading the docs again found that may not be achieved using bootstrap classes and must be done by myself

So I ended up by doing this:

imported mixins and variables from bootstrap and

@each $bp in map-keys($grid-breakpoints) {
  .visible-#{$bp}-up {
    @include media-breakpoint-up($bp) {
      display: block !important;
    }
  }
  .visible-#{$bp}-down {
    @include media-breakpoint-down($bp) {
      display: block !important;
    }
  }
}

Answer 2

With Bootstrap 4 Beta 1, you can hide sm only with d-block d-sm-none d-md-block.

https://code.luasoftware.com/tutorials/bootstrap/bootstrap-hide-element-based-on-viewport-size/

Answer 3

There is an upcoming update for Bootstrap 4 that will enable hidden on a single viewport (hidden-x)..

https://github.com/twbs/bootstrap/pull/22113

All of the visibility classes will be revamped in this update.

---

Update for Bootstrap 4 Beta

If you want to hide an element on specific tiers (breakpoints) in Bootstrap 4, use the d-* display classes accordingly. Remember xs is the default (always implied) breakpoint, unless overridden by a larger breakpoint.

https://www.codeply.com/go/bRlHp8MxtJ

• hidden-xs-down = d-none d-sm-block
• hidden-sm-down = d-none d-md-block
• hidden-md-down = d-none d-lg-block
• hidden-lg-down = d-none d-xl-block
• hidden-xl-down = d-none (same as hidden)
• hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down)
• hidden-sm (only) = d-block d-sm-none d-md-block
• hidden-md (only) = d-block d-md-none d-lg-block
• hidden-lg (only) = d-block d-lg-none d-xl-block
• hidden-xl (only) = d-block d-xl-none

Demo of all hidden / visible classes in Bootstrap 4 beta

Also note that d-*-block can be replaced with d-*-inline, d-*-flex, etc.. depending on the display type of the element. More on the display classes in beta

Answer 4

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-<size>-block

3. (hide_upper_limit): the upper limit which should be hidden. This has a format of .d-<size+1>-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): <omit>

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): <omit>
• 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