Hide html element when specific resolution

Question

I am using twitter bootstrap 3.0. When resolution of the screen gets changed to smaller the menu changed to mobile view. I have a div contained slider with images, so I want to hide that div when my menu changed to mobile view (when screen resolution small).

I tried to apply css classes on my div visible-desktop visible-tablet but it is not working.

Is there other way I can do?

Answer 1

2021 update / Bootstrap 5.1

See Display property - Hiding elements

To hide an element on extra-small (portrait mobile) screen widths, use

<div class="d-none d-sm-block">

That is hidden by default (.d-none) but visible on small or larger devices.

---

Original 2013 answer

If you're using Bootstrap v3, they changed the responsive utility class names. See http://getbootstrap.com/css/#responsive-utilities

You probably want .hidden-xs

This was also documented in Migrating from 2.x to 3.0

Answer 2

Consider using media queries. Something like

@media screen and (max-width:480px) {
    .mydiv {display:none}
}