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

by

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>

Documentation

More Related Contents:

  1. Bootstrap 3 Navbar Collapse
  2. Five equal columns in twitter bootstrap
  3. Bootstrap Rows and Columns – Do I need to use row?
  4. What is the difference between Bootstrap .container and .container-fluid classes?
  5. Responsive website zoomed out to full width on mobile
  6. Bootstrap with jQuery Validation Plugin
  7. Bootstrap Fluid grid system with different height
  8. How to remove responsive features in Twitter Bootstrap 3?
  9. Updating Bootstrap to version 3 – what do I have to do?
  10. Bootstrap – row can I have columns add up to more then 12?
  11. Bootstrap 3 breakpoints and media queries
  12. Stacked Tabs in Bootstrap 3
  13. Bootstrap 3 – Why is row class is wider than its container?
  14. How do you make Twitter Bootstrap Accordion keep one group open?
  15. How to create a sticky left sidebar menu using bootstrap 3?
  16. How to use Twitter Bootstrap 3 for non-responsive site? [duplicate]
  17. Should I use Bootstrap from CDN or make a copy on my server?
  18. Bootstrap 3.0 – Fluid Grid that includes Fixed Column Sizes
  19. Bootstrap 4 Multiple fixed-top navbars
  20. Bootstrap 3 Gutter Size
  21. How to left column fixed and right scrollable in Bootstrap 4, responsive?
  22. Bootstrap 3, 4 and 5 .container-fluid with grid adding unwanted padding
  23. Reduce the gutter (default 30px) on smaller devices in Bootstrap3?
  24. Different slide duration for each item on bootstrap 3.1 carousel
  25. How can I get my Twitter Bootstrap buttons to right align?
  26. Decreasing height of bootstrap 3.0 navbar
  27. Binding to Collapse event in Twitter Bootstrap 3
  28. Disable Bootstrap 3 navbar going 2 rows in medium viewport size
  29. Bootstrap 4 responsive navbar vertical
  30. How to justify navbar-nav in Bootstrap 3

Leave a Comment