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?

For future readers using Bootstrap 4: stackoverflow.com/questions/35351353/… — Carol Skelly
– Carol Skelly, Commented Nov 13, 2018 at 12:56

David Lavieri · Accepted Answer · 2016-06-15 16:05:09Z

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

edited Jun 15, 2016 at 16:05

David Lavieri

1,0601 gold badge8 silver badges20 bronze badges

answered Dec 3, 2013 at 15:32

Graham Langdon

2771 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jane Over a year ago

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!

Graham Langdon Over a year ago

sorry. i forgot to put !important on visibility: visible.

Graham Langdon Over a year ago

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. w3schools.com/css/css_display_visibility.asp

David Lavieri · Accepted Answer · 2016-06-15 16:14:56Z

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.

edited Jun 15, 2016 at 16:14

David Lavieri

1,0601 gold badge8 silver badges20 bronze badges

answered Sep 4, 2014 at 10:47

Adarsh Gowda K R

9618 silver badges15 bronze badges

Comments

Jop · Accepted Answer · 2013-12-03 15:32:39Z

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

answered Dec 3, 2013 at 15:32

Jop

4544 silver badges13 bronze badges

1 Comment

Jane Over a year ago

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 :)

simranjit · Accepted Answer · 2015-11-20 13:54:05Z

1

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

answered Nov 20, 2015 at 13:54

simranjit

111 bronze badge

Comments

jriver27 · Accepted Answer · 2017-11-22 18:12:28Z

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

Collectives™ on Stack Overflow

Bootstrap visible and hidden classes not working properly

5 Answers 5

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related