How to hide element on small screens with Bootstrap 4 Beta

user_4545309 0
Viewed 15726

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?

bootstrap-4
3 Answers

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

user_10720810

I was trying to use the d-propeties to show diffentes logos in differents breakpoint, I tried d-none d--block" , but it didn't work, only works d-none-. Then I realized that I was appling the class to the .img. So you can use d-none-* (hide) to any element, but to display element d-*-block only work in a wrapper element like div. I hope it help.

user_25219100
Related