d-none d-sm-block not working on mobile or toggle device toolbar

user_14382250 0
Viewed 936

I am trying to make a card invisible on mobiles, however while "d-none d-sm-block" works fine when I minimize the page, it doesn't work when I actually deploy and look at it on my mobile nor on the toggle device toolbar in chrome. For some reason "d-none d-lg-block" works perfectly fine whether minimizing or looking at it in mobile format. Any ideas as to why sm specifically isn't working? I've tried other browsers too and the same. My code is as follows.

<div class="card d-none d-sm-block">
  <div class="card-body">
        <h4 class="card-title" align="center">Example</h4>
    </div>
</div>
bootstrap-4 css html
1 Answers

The xs category only covers screen widths of 540px or smaller, and many phones these days are larger than that, so they would be in the sm category. See documentation.

So, to target something for desktop and larger screens, you'd be better off using md-, i.e. use d-none d-md-block.

user_76928590
Related