Boostrap 4 hide div not working?

Question

Here's my code:

      <div class="media">
        <img class="d-flex align-self-center mr-3 hidden-sm-down" src="filler.png" alt="Example 2">
        <div class="media-body">
          <h4>Example 2</h4>
          <p>Other contenthere</p>
        </div>
      </div>

All very simple.

What I am trying to achieve is getting the image to be hidden when the screen media size is 'small' size - however, it doesn't work. Am I missing an obvious thing here?

Thanks

Can you try `d-none d-md-block` instead of `hidden-sm-down`? — Tuğberk Kaan Duman, May 24 '18 at 13:15
Please read the docs: https://getbootstrap.com/docs/4.1/migration/#utilities — Zim, May 24 '18 at 13:23

score 0 · Answer 1 · answered May 24 '18 at 13:17

You can try this code

<div class="media">
        <img class="d-flex align-self-center mr-3 d-sm-none d-md-block" src="filler.png" alt="Example 2">
        <div class="media-body">
          <h4>Example 2</h4>
          <p>Other contenthere</p>
        </div>
      </div>

Boostrap 4 hide div not working?

1 Answers1