Bootstrap 4: Hidden Visible Cols?

Question

I was wondering why the following isn\'t working - whereby xs is hidden in xs views. I feel it is something to do with changes introduced in Bootstrap v4, but I was wonderin

Answer 1

Adding this answer because the comments in the accepted answer are getting too long and it's not complete. As already explained, the hidden-* classes no longer exist in Bootstrap 4 beta.

"What exactly is hidden-sm-DOWN?"

It no longer exists in beta, but it previous versions it meant "hidden on small and down". Meaning, hidden on xs and sm, but otherwise visible.

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. Since xs is implied, you no longer use the -xs- infix. For example, it's not d-xs-none, it's simply 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 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

---

Also see:
Bootstrap 4 hidden-X-(down/up) class not working
Missing visible-** and hidden-** in Bootstrap v4