CODEWITHSUNDEEP
csstwitter-bootstrap
user5483305
user5483305

Reputation:

hide element for medium and up devices bootstrap

I am trying to hide an element for medium devices and upwards. According to the bootstrap docs i just need to add the class hidden-md-up to the element in question. This ism't working though.

Please see demo below. I have added the class hidden-xs-up even though i need hidden-md-up because it's easier to test within the jsfiddle viewport.

DEMO https://jsfiddle.net/DTcHh/21979/

<img src="http://placehold.it/350x150" class="hidden-md-up" />

Upvotes: 5

Views: 2157

Answers (3)

kiranvj
kiranvj

Reputation: 34107

hidden-* classes are removed from Bootstrap 4 beta onwards.

If you want to show on medium and up use the d-* classes

eg:

<div class="d-none d-md-block">This will show in medium and up</div>

If you want to show only in small and below use this

   <div class="d-block d-md-none"> This will show only in below medium form factors</div>

Screen size and class chart

| Screen Size        | Class                          |
|--------------------|--------------------------------|
| Hidden on all      | .d-none                        |
| Hidden only on xs  | .d-none .d-sm-block            |
| Hidden only on sm  | .d-sm-none .d-md-block         |
| Hidden only on md  | .d-md-none .d-lg-block         |
| Hidden only on lg  | .d-lg-none .d-xl-block         |
| Hidden only on xl  | .d-xl-none                     |
| Visible on all     | .d-block                       |
| Visible only on xs | .d-block .d-sm-none            |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block            |

Rather than using explicit .visible-* classes, you make an element visible by simply not hiding it at that screen size. You can combine one .d--none class with one .d--block class to show an element only on a given interval of screen sizes (e.g. .d-none.d-md-block.d-xl-none shows the element only on medium and large devices).

Documentation here

Upvotes: 5

Carol Skelly
Carol Skelly

Reputation: 362290

The hidden-md-up class is only available in Bootstrap 4 so it won't work in your fiddle. Here's a Bootstrap 4 example:

http://www.codeply.com/go/baF57xPjuv

For Bootstrap 3.x you'd need to use both the hidden-md and hidden-lg classes:

<img src="http://placehold.it/350x150" class="hidden-md hidden-lg" />

Upvotes: 0

Geoff James
Geoff James

Reputation: 3180

You're nearly there!

You just need to use class="hidden-md" for viewports that fit into the "medium" size category.

<img src="http://placehold.it/350x150" class="hidden-md hidden-lg" />

Likewise hidden-xs for extra small, hidden-sm for small, hidden-lg for large and so on and so forth.

Hope this helps!

UPDATE
Just for clarity - the hidden-md-up classes are only available in (currently) Bootstrap v4-alpha.

The OP was referencing v3, where these classes are not yet available; thus requiring setting all the necessary classes to hide on - I've reflected this in the answer.

Upvotes: 4

Related Questions