How to hide an item on small screens using Bootstrap 4 Beta

Question

I just switched from 4 alpha bootstrap to beta, but now I can’t figure out how to hide an element on a small screen. In alpha, it was hidden-md-up and hidden-sm-down, which worked great. "hidden-md-up" is now "d-md-none", but another that I can’t work with

<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

A short break, a cup of coffee, then I realized this: adding the class "d-none d-md-block" will help

 <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> 

Learn more about responsive displays in the Bootstrap 4 documentation .

Answer 2

I just add this as an answer because it is too long for a comment ... which was @Kian's answer.

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

So the question is, “do you want to show this at the XS breakpoint?”:

• If so, then the d- * classes are not needed, as this will be shown in XS and all sizes are larger.
• If not, then do not d-none .

When you go to the next breakpoint [SM], ask yourself: “Do I want to show this at the breakpoint SM?”.

• If yes, and it shows for XS too, then no change.
• If yes and XS was hidden (with d-none ), then you need to do d-sm-block .
• If not and XS has been shown, then do d-sm-none .
• If not and XS was hidden, then no change.

Rinse-repeat for each breakpoint which is greater if the display property is different from 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 is the violin

Answer 3

I tried to use the d- properties to show the diffentes logos at the breakpoint of the differentials, I tried d- none d- -block ", but it didn’t work, only d-none- works. Then I realized that I applied the class to .img. So that way, you can use d- none- * (hide) for any element, but to display the d- * -block element only work in a wrapper element such as a div. I hope this helps.