30

I tried to use the Bootstrap visible and hidden classes to create content only visible on mobile/desktop. I noticed the classes weren't working properly (and I have noticed a lot of people had this problem and solved it this way) so I created a mobile stylesheet to set which of the divs to show on mobile.

This is my current code:

<div class="containerdiv hidden-sm hidden-xs visible-md visible-lg">
  <div class="row">
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 logo">
    </div>
  </div>
</div>

<div class="mobile">
  test
</div>

Now the .mobile should be visible on mobile screens, 900px width, and smaller. I used the Bootstrap classes for the other div, .containerdiv, and that works so far, but only when I added a value for hidden-xs in my own mobile CSS sheet, like so;

.hidden-xs {
  display:none !important;
}
.mobile {
  display:block !important;
}

The .mobile div should now show up on screens 900px or smaller but it still doesn't. I'm not sure why it doesn't, display:block is the right thing to use right? Adding visible-xs and visible-sm does nothing.

What is the proper way to do this and why is my version not working?

Mogsdad
  • 44,709
  • 21
  • 151
  • 275
Jane
  • 816
  • 2
  • 20
  • 38
  • For future readers using **Bootstrap 4**: https://stackoverflow.com/questions/35351353/missing-visible-and-hidden-in-bootstrap-v4 – Carol Skelly Nov 13 '18 at 12:56

5 Answers5

19

Your .mobile div has the following styles on it:

.mobile {
    display: none !important;
    visibility: hidden !important;
}

Therefore you need to override the visibility property with visible in addition to overriding the display property with block. Like so:

.visible-sm {
    display: block !important;
    visibility: visible !important;
}
David Lavieri
  • 1,060
  • 1
  • 8
  • 19
Graham Langdon
  • 277
  • 1
  • 4
  • Overriding did not work so I removed the Visibility in my main style sheet and this worked. Mobile now only shows up on mobile screens, thank you! – Jane Dec 03 '13 at 15:39
  • sorry. i forgot to put !important on visibility: visible. – Graham Langdon Dec 03 '13 at 15:46
  • 1
    here's an article on when to use visibility vs. display to hide and show elements. the short version is: visibility: hidden makes elements invisible but they still take up the same space in the layout. display: none hides the element and takes it completely out of the flow of the page. http://www.w3schools.com/css/css_display_visibility.asp – Graham Langdon Dec 03 '13 at 15:49
7

No CSS required, visible class should like this: visible-md-block not just visible-md and the code should be like this:

<div class="containerdiv hidden-sm hidden-xs visible-md-block visible-lg-block">
    <div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 logo">

        </div>
    </div>
</div>

<div class="mobile hidden-md hidden-lg ">
    test
</div>

Extra css is not required at all.

David Lavieri
  • 1,060
  • 1
  • 8
  • 19
Adarsh Gowda K R
  • 941
  • 8
  • 15
1

Your mobile class Isn't correct:

.mobile {
  display: none !important;
  visibility: hidden !important; //This is what's keeping the div from showing, remove this.
}
Jop
  • 406
  • 4
  • 10
  • This would make the mobile class visible on desktops and that is not what I want but thank you for looking into it, the problem is solved now :) – Jane Dec 03 '13 at 15:40
1

If you give display table property in css some div bootstrap hidden class will not effect on that div

simranjit
  • 11
  • 1
0

As of today November 2017
Bootstrap v4 - beta

Responsive utilities

All @screen- variables have been removed in v4.0.0. Use the media-breakpoint-up(), media-breakpoint-down(), or media-breakpoint-only() Sass mixins or the $grid-breakpoints Sass map instead.

Removed from v3: .hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block

Removed from v4 alphas: .hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down

https://getbootstrap.com/docs/4.0/migration/#responsive-utilities

jriver27
  • 852
  • 5
  • 19