Having an issue with the new responsive utilities hidden / visible classes, when migrating to Bootstrap 4. I am aware that .hidden- classes have been removed from v3 and replaced with .hidden-*-up
.hidden-*-down
. Using the new .hidden-*-up.hidden-*-down
classes but the elements aren't changing to visible/hidden. Can't figure out why.
<div class="col hidden-xs-down">
<span class="vcard">
…
</span>
</div>
<div class="col hidden-lg-down">
<div class="hidden-sm-down">
…
</div>
<div class="hidden-xs-down">
…
</div>
</div>
* nothing is hidden in this example, regardless of screen size (Safari, Responsive Design Mode)
This question is related to
twitter-bootstrap
twitter-bootstrap-3
hide
hidden
twitter-bootstrap-4
Some version working
<div class="hidden-xs">Only Mobile hidden</div>
<div class="visible-xs">Only Mobile visible</div>
Bootstrap 4 (^beta) has changed the classes for responsive hiding/showing elements. See this link for correct classes to use: http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements
Screen Size Class
-
Hidden on all .d-none
Hidden only on xs .d-none .d-sm-block
Hidden only on sm .d-sm-none .d-md-block
Hidden only on md .d-md-none .d-lg-block
Hidden only on lg .d-lg-none .d-xl-block
Hidden only on xl .d-xl-none
Visible on all .d-block
Visible only on xs .d-block .d-sm-none
Visible only on sm .d-none .d-sm-block .d-md-none
Visible only on md .d-none .d-md-block .d-lg-none
Visible only on lg .d-none .d-lg-block .d-xl-none
Visible only on xl .d-none .d-xl-block
Refer this link http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements
4.5 link: https://getbootstrap.com/docs/4.5/utilities/display/#hiding-elements
Source: Stackoverflow.com