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?
This question is related to
html
css
twitter-bootstrap
responsive-design
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;
}
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.
If you give display table property in css some div bootstrap hidden class will not effect on that div
Your mobile class Isn't correct:
.mobile {
display: none !important;
visibility: hidden !important; //This is what's keeping the div from showing, remove this.
}
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
Source: Stackoverflow.com