119

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)

Yatko
  • 8,715
  • 9
  • 40
  • 46
  • 3
    And your question is what? https://stackoverflow.com/help/how-to-ask – Rob Aug 14 '17 at 02:28
  • @Rob fair ;) changed. – Yatko Aug 14 '17 at 02:39
  • You are required to post a minimal example of the markup causing the problem: [mcve] We have no clue what "the elements" are. – Rob Aug 14 '17 at 02:39
  • Setup a codepen containing Bootstrap 4 and your HTML example: https://codepen.io/esr360/pen/prWjYv. Your claim of "nothing is hidden in this example, regardless of screen size" is incorrect. – ESR Aug 14 '17 at 03:27
  • @EdmundReed yes, it drives me crazy :I tried with a simple example, works on my mac, stops working right after sync ... tried cache, even a different ISP to rule-out any caching – Yatko Aug 14 '17 at 03:40
  • @Yatko - I said it's "incorrect"! For me on small resolutions, the 3 dots dissappear. Open my codepen, and reduce the browser width, you will see some of the content dissappears. So the classes are working. Try changing 'down' to 'up'? Perhaps you got the behavior mixed up? – ESR Aug 14 '17 at 03:42
  • @EdmundReed think I found it, it's annoyingly simple but wasn't ready for this, posting the answer after testing – Yatko Aug 14 '17 at 04:02
  • oh man how is this improvement, it seems more confusing than before – Hector Lamar Sep 23 '17 at 13:35

5 Answers5

259

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

Yatko
  • 8,715
  • 9
  • 40
  • 46
  • 2
    The reason why I could't find this, v4 beta was published couple days ago and all Google-indexed results still bring you to v4-alpha, somehow I got the [new CDN](https://getbootstrap.com/docs/4.0/) link but all the rest was still -alpha – Yatko Aug 14 '17 at 04:25
  • 3
    I assume "d" = `display`. – user20232359723568423357842364 Sep 29 '17 at 02:51
  • 25
    why would they introduce such an unintuitive, breaking change? any explanation? – szaman Nov 21 '17 at 14:31
  • 3
    @rrrafalsz I've wondered about the same thing. This seems like a needlessly complicated step backwards from the previous "visible-sm-up/down" they had in alpha. It would be interesting to know the reason. – Katai Jan 24 '18 at 15:55
  • Could you comment clearly in your example, which of the DIVs will be visible and which are not? It took me a while, and I am not sure, if I comment it, if that would be right. thanks – helle Mar 06 '18 at 18:40
  • [The use of d-* is in the documentation for the 4.0 release](https://getbootstrap.com/docs/4.0/utilities/display/). Here's a link to the [migration documentation](https://getbootstrap.com/docs/4.0/migration/#responsive-utilities) which mentions the removal of the hidden-* and visible-* classes. – Dave F Mar 12 '18 at 22:30
  • Nice answer! But don't limit it to the `d-*-block` classes. They can be also used with `flex` and `inline-flex` (maybe further) instead of `block` – baao Apr 18 '18 at 15:24
  • yes why the freaking frak I am writing more code to hide things vs. only hide in small devices show in others. – chaser7016 Jun 25 '18 at 16:48
  • I found [this useful gist cheat sheet](https://gist.github.com/gijsbotje/fbc0128543fb823353c1e267a2d77286#file-display-utilities-csv) from @gijsbotje. Replace `[value]` with one of the supported values and you’re good to go. Most commonly `block`. – CJ Edgerton Nov 20 '19 at 16:31
  • For now, I only need to differentiate between xs (extra small) and all other sizes, so I use SASS' @extend to create just these 2 meaningful aliases: https://gist.github.com/keithrbennett/597205f14a8a79d6f294cfa86135cc7f – Keith Bennett May 18 '20 at 19:40
  • I'd suggest adding "min-height: 0px;", in some cases the browser will still keep a very tiny strip.
    eXtra Small <576px
    – ATH Jul 21 '20 at 02:04
78

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

gef
  • 7,025
  • 4
  • 41
  • 48
Vinod Chauhan
  • 888
  • 7
  • 8
  • 1
    Whilst this may theoretically answer the question, [it would be preferable](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – Rick Aug 04 '18 at 08:56
6

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

jross
  • 259
  • 3
  • 5
  • 2
    Thank you. Bootstrap could remove old content at least to archive so total noobs (like myself) dont have to go throu 123523532 possible solutions before finding this answer at stack. For the last few years, stack overflow is more useful than google, so when people say use google...I say no, use stack.. Faster and more useful. – Blue Nov 06 '17 at 09:10
3

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

Yatko
  • 8,715
  • 9
  • 40
  • 46
2

Some version working

<div class="hidden-xs">Only Mobile hidden</div>
<div class="visible-xs">Only Mobile visible</div>
Limitless isa
  • 3,689
  • 36
  • 28