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.

<span class="hidden-sm-down">Text</span> 

There is a way to do this using only bootstrap classes or not?

Answer 1

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 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/