Bootstrap 4: hide medium only

Question

I've used Bootstrap 4 in a new online project of mine. I mainly aim at mobile use but want to make it accessible for desktop users.

I have some textst i'd like to hide on medium screens only with predefined classses, but somehow I can't get it to work. Sloppy workaround works but is sloppy: (should illustrate what I'm trying to achieve) :

<span class="hidden-sm-up">Display: </span>
<span class="hidden-md-down">Display: </span>

Of course this is bad coding, but I can't seem to find teh right combination of classes to only hide at medium screens. (I would expect a class like .hidden-md but no...)

Any help would be greatly appreciated.

Best,
knal

.hidden-md should work according to the docs http://getbootstrap.com/css/#helper-classes — Brad, Feb 23 '17 at 08:39
@neophyte; exactly why I encountered an unexpected 'inconsistency'. — knalpiap, Feb 23 '17 at 08:56
Not supported in bootstrap 4 :(.. You have to add it with custom css :( — Sahil Dhir, Feb 23 '17 at 09:00
this can be auseful link for you [http://stackoverflow.com/questions/35351353/missing-visible-and-hidden-in-bootstrap-v4] mentioned by @Brad — neophyte, Feb 23 '17 at 09:35
I looks like the missing `hidden-md` and similar classes will be [back for the beta](https://github.com/twbs/bootstrap/pull/22113) as `d-none-md` — Carol Skelly, Mar 13 '17 at 12:09

score 0 · Accepted Answer · answered Feb 23 '17 at 12:08

Thanks guys,

Slightly disappointed due to the lack of a straightformard solution but happy with the result I implemented the following to suit my needs:

@media only screen and (max-width: 992px) and (min-width: 576px){  
    .filters p span {  
        display: none;
    }  
}

Brad's link convinced me of this method. Thanks!

Best,
Knal

Bootstrap 4: hide medium only

1 Answers1