Bootstrap visible and hidden classes not working properly

css, html, responsive-design, twitter-bootstrap

Solution

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;
}

Problem

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?

Original source

Related problems