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.
Best Answer
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: