How to hide element on small screens with Bootstrap 4 Beta

Question

I just moved from bootstrap 4 alpha to beta, but I can't figure out how to hide an element on a small screen now. In the alpha this was "hidden-md-up" and "hidden-sm-down" which worked beautifully. "hidden-md-up" is now "d-md-none", but the other one I can't get to work

<div class="d-md-block d-xs-none d-sm-none">Show on large screen only - NOT working for me</div>
<div class="d-md-none">Show on small screen only</div>

Any ideas?

Answer 1

I'm only adding this as an answer because it got too long for the comment...which was a reply to @Kian.

Since bootstrap [4] is "mobile-first", you start there.

So the question is, "do you want to show this on XS breakpoint?":

• If yes, no d-* classes needed as it will be shown on XS and all sizes bigger.
• If no, then do d-none.

When you move to the next breakpoint [SM], ask yourself, "do I want to show this on SM breakpoint?".

• If yes and it's show for XS too, then no changes.
• If yes and XS was hidden (with d-none), then you need to do d-sm-block.
• If no and XS was shown, then do d-sm-none.
• If no and XS was hidden, then no changes.

Rinse-repeat for each breakpoint that is bigger where the display property is different than the previous/smaller breakpoint

Here are some examples:

<div class="d-none d-md-block">Show on medium, and bigger, screen sizes</div>
<div class="d-md-none">Show on extra small and small screen sizes</div>
<div class="d-none d-md-block d-lg-none">Show on ONLY medium screen sizes</div>
<div class="d-none d-sm-block d-md-none d-xl-block">Show on ONLY small and extra large screen sizes</div>

Here's a fiddle

Answer 2

A short break, cup of coffee later I figured it out: Adding the class "d-none d-md-block" will do the trick

<div class="d-none d-md-block">Show on large screen only works now</div>
<div class="d-md-none">Show on small screen only</div>

Read more about responsive display utilities at the Bootstrap 4 Documentation.