Bootstrap visible and hidden classes not working properly

Question

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?

Answer 1

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

Answer 2

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.

Answer 3

Your mobile class Isn't correct:

.mobile {
  display: none !important;
  visibility: hidden !important; //This is what's keeping the div from showing, remove this.
}

Answer 4

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