6

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?

adrianbanks
  • 81,306
  • 22
  • 176
  • 206
Sergino
  • 10,128
  • 30
  • 98
  • 159

4 Answers4

11

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

Phil
  • 157,677
  • 23
  • 242
  • 245
8

Consider using media queries. Something like

@media screen and (max-width:480px) {
    .mydiv {display:none}
}
dkellner
  • 8,726
  • 2
  • 49
  • 47
  • FYI Bootstrap uses *<768px* to detect small screens – Phil Dec 22 '13 at 23:51
  • FYI, no it doesn't but we know what you mean. – dkellner Nov 28 '21 at 22:08
  • It did in 2013 when I wrote that comment ~ https://getbootstrap.com/docs/3.3/css/#responsive-utilities-classes. The current version (5.1) uses 576px as the [extra-small device breakpoint](https://getbootstrap.com/docs/5.1/layout/breakpoints/#available-breakpoints) – Phil Nov 28 '21 at 23:10
4

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)

Ivan
  • 794
  • 2
  • 7
  • 15
0

You can put in the class of that div .hidden-xs.. It's more simple. You are only telling that this div is visible on desktop and tablets, and not telling that it isn't visible in small devices.

arturataide
  • 363
  • 2
  • 11