[v4-alpha] Missing responsive classes d-xs-{block,display,none}

I just wrote a small debugging label indicating the current breakpoint as follows:

<div style="position:fixed; top: 30px; right: 75px; background-color: rgba(255,0,0,0.1)">
    <span class="d-none d-xs-block d-sm-none">XS</span>
    <span class="d-none d-sm-block d-md-none">S</span>
    <span class="d-none d-md-block d-lg-none">M</span>
    <span class="d-none d-lg-block d-xl-none">L</span>
    <span class="d-none d-xl-block">XL</span>
</div>

This shows the current breakpoint fine, except XS: there’s are no classes called d-xs-block or d-xs-none.

This is actually preventing me from defining my own custom breakpoint such as XXS and being able to test it. To preserve the symmetry, classes:

• d-xs-block
• d-xs-display
• d-xs-none

should be provided.

---

To solve my initial problem and make the snippet above work, I had to change the line to:

    <span class="d-sm-none">XS</span>

which looks like a corner case handling. If the aforementioned classes were provided, I would’ve preserved the symmetry in the code just fine. Not to mention, I think d-none d-xs-block is a valid use case when someone like me defines classes smaller than xs, such as xxs.

[mdo]

xs breakpoint specific classes still exist, but the classes don’t include that infix. Instead of .d-xs-none, it’s .d-none as those styles are never bound to a media query—they apply from min-width: 0 and up, across all viewports.

[mdo]

Also, please refer to StackOverflow and Slack for how-to questions. I’m going to lock this thread given it’s a not a bug or feature request, and there’s no problem to resolve.