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?

Solution 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

Solution 2

Consider using media queries. Something like

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

Solution 3

You just have to apply the Bootstrap classes as seen here. You can test them there also, if you resize your browser screen you can check wich ones are active.

<div class="hidden-xs">This is the div that will hide on mobile</div>

Should only be seen in any screen bellow 768px (mobiles)

Comments

[Phil]

FYI Bootstrap uses <768px to detect small screens

[dkellner]

FYI, no it doesn't but we know what you mean.

[Phil]

It did in 2013 when I wrote that comment ~ getbootstrap.com/docs/3.3/css/#responsive-utilities-classes. The current version (5.1) uses 576px as the extra-small device breakpoint