bootstrap 4 responsive utilities visible / hidden xs sm lg not working
Solution 1:
With Bootstrap 4 .hidden-*
classes were completely removed (yes, they were replaced by hidden-*-*
but those classes are also gone from v4 alphas).
Starting with v4-beta, you can combine .d-*-none
and .d-*-block
classes to achieve the same result.
visible-* was removed as well; instead of using explicit .visible-*
classes, make the element visible by not hiding it (again, use combinations of .d-none .d-md-block). Here is the working example:
<div class="col d-none d-sm-block">
<span class="vcard">
…
</span>
</div>
<div class="col d-none d-xl-block">
<div class="d-none d-md-block">
…
</div>
<div class="d-none d-sm-block">
…
</div>
</div>
class="hidden-xs"
becomes class="d-none d-sm-block"
(or d-none d-sm-inline-block) ...
<span class="d-none d-sm-inline">hidden-xs</span>
<span class="d-none d-sm-inline-block">hidden-xs</span>
An example of Bootstrap 4 responsive utilities:
<div class="d-none d-sm-block"> hidden-xs
<div class="d-none d-md-block"> visible-md and up (hidden-sm and down)
<div class="d-none d-lg-block"> visible-lg and up (hidden-md and down)
<div class="d-none d-xl-block"> visible-xl </div>
</div>
</div>
</div>
<div class="d-sm-none"> eXtra Small <576px </div>
<div class="d-none d-sm-block d-md-none d-lg-none d-xl-none"> SMall ≥576px </div>
<div class="d-none d-md-block d-lg-none d-xl-none"> MeDium ≥768px </div>
<div class="d-none d-lg-block d-xl-none"> LarGe ≥992px </div>
<div class="d-none d-xl-block"> eXtra Large ≥1200px </div>
<div class="d-xl-none"> hidden-xl (visible-lg and down)
<div class="d-lg-none d-xl-none"> visible-md and down (hidden-lg and up)
<div class="d-md-none d-lg-none d-xl-none"> visible-sm and down (or hidden-md and up)
<div class="d-sm-none"> visible-xs </div>
</div>
</div>
</div>
- codepen.io/_yatko/pen/ZJXQxy
Documentation
Solution 2:
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
Solution 3:
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
Solution 4:
Some version working
<div class="hidden-xs">Only Mobile hidden</div>
<div class="visible-xs">Only Mobile visible</div>
Solution 5:
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