bootstrap 4 responsive utilities visible / hidden xs sm lg not working

user_1951635 0
Viewed 152503

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)

twitter-bootstrap-4 twitter-bootstrap-3 twitter-bootstrap hidden hide
5 Answers

Screen Size Class

-

  1. Hidden on all .d-none

  2. Hidden only on xs .d-none .d-sm-block

  3. Hidden only on sm .d-sm-none .d-md-block

  4. Hidden only on md .d-md-none .d-lg-block

  5. Hidden only on lg .d-lg-none .d-xl-block

  6. Hidden only on xl .d-xl-none

  7. Visible on all .d-block

  8. Visible only on xs .d-block .d-sm-none

  9. Visible only on sm .d-none .d-sm-block .d-md-none

  10. Visible only on md .d-none .d-md-block .d-lg-none

  11. Visible only on lg .d-none .d-lg-block .d-xl-none

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

user_84122940
user_36138280

Some version working

<div class="hidden-xs">Only Mobile hidden</div>
<div class="visible-xs">Only Mobile visible</div>
user_12566320

Bootstrap v5.0 +

<div class="d-xs-block d-sm-none">xs <576px</div>
<div class="d-none d-sm-block d-md-none">sm ≥576px</div>
<div class="d-none d-md-block d-lg-none">md ≥768px</div>
<div class="d-none d-lg-block d-xl-none">lg ≥992px</div>
<div class="d-none d-xl-block d-xxl-none">xl ≥1200px</div>
<div class="d-none d-xxl-block">xxl ≥1400px</div>

*new Extra extra large xxl ≥1400px breakpoint

user_19516350
Related