Responsive show/hide classes in new Bootstrap 4

Question

I'm struggling to understand how to implement the new classes that show and hide content relevant to screen size in Bootstrap 4

This doesn't seem to be working...

<div class="d-sm-block">
 ITEMS FOR SMALL/MOBILE DEVICES
</div>
<div class="d-md-block">
 ITEMS FOR  MEDIUM/LARGE DEVICES
</div>

These classes have completely changed in Bootstrap 4.0.0 _ https://stackoverflow.com/questions/35351353/missing-visible-and-hidden-in-bootstrap-v4 — Carol Skelly, Mar 20 '18 at 03:13

score 4 · Answer 1 · answered Oct 18 '17 at 13:35

4

There's no d-sm-block or d-md-block. You need to use the following classes:

See Responsive Utilities for the complete documentation.

Your code should be:

<div class="hidden-md-up">
 ITEMS FOR SMALL/MOBILE DEVICES
</div>
<div class="hidden-md-down">
 ITEMS FOR  MEDIUM/LARGE DEVICES
</div>

answered Oct 18 '17 at 13:35

Soolie

1

Thanks @Soolie I got confused by [link](https://getbootstrap.com/docs/4.0/migration/#global-changes) saying "Removed from v4 alphas: .hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down" - so the list you shared is still current? – Bill Teale Oct 18 '17 at 14:01
1

actually no it doesn't @Soolie - they have been taken out of bootstrap 4 beta, as per this [stackoverflow thread](https://stackoverflow.com/questions/35351353/missing-visible-and-hidden-in-bootstrap-v4) – Bill Teale Oct 21 '17 at 12:22

1 Answers1