How to hide element on small screens with Bootstrap 4 Beta
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 dod-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
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.