Bootstrap 4 “hidden” class doesn't work

9
votes

I'm using Bootstrap v4 with it's default CSS and JS. I'm trying to apply the classes hidden, hidden-XX-down and hidden-XX-up to various divs, buttons, etc. But it doesn't seem to affect anything. All other classes work, except this one.

Here's an example:

<div class="row">

  <div class="col col-10 offset-1 hidden-sm-down">

    <p class="text-primary text-center">Lorem ipsum dolor sit amet.</p>

  </div>

</div>

I want the paragraph to be invisible when I resize the window to a smaller width (sm-down), yet it remains visible and nothing happens.

4
csshtmltwitter-bootstrapbootstrap-4
why don't you define your own css, for example, use a class="Andre-hidden" and in your CSS, write .Andre-hidden{display:none;} - Oscar Zhang
Could it be inheriting a property from a parent? Did you inspect the element? - Gary Hayes
@OscarZhang Bootstrap already has the hidden class, so I would consider it redundant to create another class to reach the same goal. Also, I'm still a noobie exploring Bs, so I'm trying to stick to bootstrap's default CSS for now... - user9179774
@GaryHayes I did, but where should I be looking? (sorry for the noobiness) - user9179774

4 Answers

12
votes

Use d-none, d-sm-none, d-md-none etc.

https://getbootstrap.com/docs/4.0/utilities/display/

To only display for md up (hide for sm down) use: 

<div class="d-none d-md-block"></div>
2
votes

Well, using the display property definitely solved the problem.

In case anyone wonders why the hidden classes didn't work, it's very simple... They no longer exist in version 4 of Bootstrap. That's what you get from watching old tutorial videos.

1
votes

If you already have code with the hidden class I recommend creating one:

.hidden{ 
    display: none;
}

Cheers

-1
votes

In Bootstrap 4, the class invisible took the place of the class hidden.