9

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 wondering how this was still achievable within the code here than going into the CSS? I am using 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>

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Curious Student
  • 669
  • 4
  • 13
  • 25

2 Answers2

27

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
4

EDIT the hidden-* properties are removed from the bootstrap beta 4.

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

For example:

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

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

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

the class d-lg-none: will not be visbile for large screen devices devices.

For 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 that you want with d-*-block. Example if you want to display for md only, you should write class="d-none d-md-block".

Michael GEDION
  • 879
  • 8
  • 16
  • For some reason, this still doesn't work for me. That was also the problem I was having. – Curious Student Aug 22 '17 at 08:43
  • Thank you Michael, that seems to be working for me too. Out of interest, do you know the usage of the "hidden-sm-up" and "-down" which is referenced as being in v4 now? – Curious Student Aug 22 '17 at 09:31
  • Have edited again! "hidden-sm-up" and "-down" are removed from v4 ! you should use d-*-none along with d-*-block. – Michael GEDION Aug 22 '17 at 09:34
  • 1
    Just so i'm clear too, and for anyone finding this in the future - d-none hides the div, d-'size here'-block shows it in that size view. e.g
    hides it in all but md and lg If you agree?
     – Curious Student Aug 22 '17 at 09:40
  • yes, i think so i don't have a large screen to test! – Michael GEDION Aug 22 '17 at 09:44
  • 1
    Further [explained here](https://medium.com/wdstack/upgrade-bootstrap-4-alpha-6-to-beta-ca582f15ee32) `d-none d-md-block` is equivalent to `hidden-sm-down` so the `d-lg-block` is unnecessary. – Carol Skelly Aug 22 '17 at 11:44
  • @ZimSystem What exactly is hidden-sm-DOWN? Previously I was using hidden-sm without the down/up - but unsure what this up/down refers to. – Curious Student Aug 23 '17 at 08:11
  • I think hidden-sm-DOWN means hide this div for devices that have "down" less that sm size. And Up: hide this div for devices that have "up" greater than sm size. – Michael GEDION Aug 23 '17 at 08:44
  • @ZimSystem I was hoping the following would work, but it doesn't appear to. In principle, I was asking if there was a neater way than just copy and pasting div classes, each of which appeared in different views:
    This shows in xs view only!
    Sample Text
    This shows in sm view only!
    Sample Text
    – Curious Student Aug 23 '17 at 13:56
  • See [my answer](https://stackoverflow.com/a/45842581/171456), and https://www.codeply.com/go/vEU45kUYZS – Carol Skelly Aug 23 '17 at 14:37