Bootstrap 4: hidden visible shelves?

Question

I was wondering why the following does not work - while xs is hiding in xs views. I feel this is due to changes made in Bootstrap v4, but I was wondering how is this still possible in the code here than in CSS? I use the default bootstrap.css file.

<div class="container"> <div class="row"> <div class="hidden-xs col-lg-4 col-md-6 col-sm-12 col-xs-12"> Some text here. </div> </div> 

Answer 1

Adding this answer because the comments in the accepted answer become too long and not complete. As already explained, hidden-* classes no longer exist in the beta version of Bootstrap 4.

"What exactly is hidden-sm-DOWN?"

It no longer exists in beta, but in previous versions it meant "hidden at low and low levels." A value hidden in xs and sm , but otherwise visible.

If you want to hide an element at certain levels (breakpoints) in Bootstrap 4, use the d-* display classes accordingly. Remember that xs is the default breakpoint (always implied) unless it is overridden by a larger breakpoint. Since xs implied, you no longer use the -xs- infix. For example, it is not d-xs-none , it is just d-none .

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-up = d-none (same as hidden )
• hidden-sm-up = d-sm-none
• hidden-md-up = d-md-none
• hidden-lg-up = d-lg-none
• hidden-xl-up = d-xl-none
• 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
• visible-xs (only) = d-block d-sm-none
• visible-sm (only) = d-none d-sm-block d-md-none
• visible-md (only) = d-none d-md-block d-lg-none
• visible-lg (only) = d-none d-lg-block d-xl-none
• visible-xl (only) = d-none d-xl-block

Demo of all hidden / visible classes in beta version of Bootstrap 4

Also note that d-*-block can be replaced with d-*-inline , d-*-flex , etc. depending on the type of display of the item. Learn more about displaying classes in beta

---

See also:
Bootstrap 4 hidden-X- (down / up) class does not work
Missing visible - ** and hidden - ** in Bootstrap v4

Answer 2

EDIT hidden-* properties removed from bootstrap 4 beta .

You need to use d-*-none (* = xl, sm, md, lg). Link

For instance:

the d-none class will allow you something invisible on every screen.

class d-sm-none : will not be displayed for small devices.

class d-md-none : will not be used for medium devices.

class d-lg-none : will not be used for devices with large screens.

You need to write this.

 <div class="container"> <div class="row"> <div class="d-none d-sm-none d-md-block col-lg-4 col-md-6 col-sm-12 col-xs-12"> Some text here. </div> </div> 

Start with d-none add the screen you want with d-*-block . For example, if you want to display only for md, write class="d-none d-md-block" .