Bootstrap: Alpha 6 Responsive Utilities vs. Beta 1 Display Properties

Created on 15 Aug 2017 · 25Comments · Source: twbs/bootstrap

According to the Docs, Beta 1 has done away with Alpha 6's Responsive Utilities (specifically the .hidden-* classes due to conflicts with jQuery's hidden() method. Fine, I get that.

However, in upgrading templates coded for Alpha 6, it became apparent to me that what the Docs say in regards to replacing them is a bit vague, so I thought I'd help by offering what I think is (hopefully) an accurate mapping of the Alpha 6 Responsive Utilities to Beta 1's Display Properties.

The basics are this: any usage of the .hidden-* classes will now require multiple .d-* classes to achieve the same results.

Below is a table (hopefully pasting from Excel 2016 carries over, otherwise I'm gonna do a lot of formatting) showing the Beta 1 equivalents to Alpha 6's classes. Please correct me if I am mistaken, or have omitted something, or perhaps am not taking the right approach with this.

Hopefully (if I am correct with my matrix above) this will help others and perhaps should be considered as part of the Migration section of the documentation, at least (until BS4 is out of Beta or Alpha 6 is a long and distant memory).

css v4

Source

Joyrex

👍19 ❤7 😕6 👎4

Most helpful comment

I think removing .hidden- is a mistake, because .d- and .hidden- serve different purposes IMO, they just happen to modify the same property. The .d- classes are handy if you intend to switch the display property between inline, block, etc. That is no substitute for hiding and showing an element responsively.
Let's say, for example, you are implementing a previously defined component, that has responsive display property, alternating between block and flex. Now you decide to hide that element on mobile. With the new classes, instead of simply adding .hidden-xs-down, you need to define .d-none, and then learn the guts of the component in order to restore the correct display property for every breakpoint. Now the worst side effect: imagine you come back later on and edit the definition of said component, changing the display property. You have to be aware of, and edit every instance of the component that uses .d- for the unrelated purpose of hiding/showing.

Maybe if .d-none also had up/down variations, it could accommodate for both use cases?

@Joyrex great work with that table by the way :)

hugofelp on 8 Sep 2017

👍8 ❤1

All 25 comments

Thanks! I was struggling with that for a while.

myorangeca on 15 Aug 2017

What complicates this a bit more as well is whether the element you are attempting to hide (or display) depends now too on whether it is a -block or -inline at it's most basic. Not sure yet if the new Display properties are more flexible versus the ease of the old classes.

Joyrex on 15 Aug 2017

Its definitely not easy to use but in the long run we will get used to it. I am still using the old utilities from alpha.6 - just paste this to your custom.scss file (below). Most likely will transition over to the new utility once beta.2 is released.

/* visibility */
@each $bp in map-keys($grid-breakpoints) {
  .hidden-#{$bp}-up {
    @include media-breakpoint-up($bp) {
      display: none !important;
    }
  }
  .hidden-#{$bp}-down {
    @include media-breakpoint-down($bp) {
      display: none !important;
    }
  }
}

myorangeca on 15 Aug 2017

@Joyrex as far i know d-xs-none doesnt exist ..?

jipexu on 15 Aug 2017

You are right! I’ll amend my table.

Joyrex on 15 Aug 2017

Which leads me to wonder: was that an omission by design?

Joyrex on 15 Aug 2017

.hidden-xs-down ==> d-none d-sm-[any of display context : inline, table, table-cells, block .......]

jipexu on 15 Aug 2017

👍1

I get that maybe those utilities were removed because of conflicts with jQuery, but can't we have them in another way? Having to do this workaround of putting 2 classes to set responsive visibility is confusing and unnecessary.

roooodcastro on 15 Aug 2017

👍5

I'd be happy to improve migration docs for this to better familiarize folks with it. Please suggest some PRs if you'd like! Beyond that, there's nothing else for us to change here though—the old hidden utilities aren't coming back. The display utilities are more explicit, more flexible, and provide more options than before.

For all the .hidden-*-up classes, use .d-*-none.
For all the .hidden-*-down classes, use .d-none.d-*-{inline|inline-block|block|table|table-cell|flex|inline-flex}.

On the surface, that looks like at least half of all usage would require a second class now, but that's not always the case. Say you wanted an element to be a flex container, but have it hidden on mobile devices and shown on medium devices and up.

With the old model: .d-flex.hidden-md-down.
With the new model: .d-none.d-md-flex.

For most situations, it's the same number of classes. When you need two classes, you need two no matter which model—few items are flexbox to start, inline-block to start, etc.

mdo on 16 Aug 2017

👎3 ❤1 😕1 👍1

@mdo - Thank you for the clarification on usage!

Joyrex on 16 Aug 2017

@mdo - I've updated the table above to reflect what you've said, but in thinking about it (and apologies for second guessing the person who wrote this since they know far more about CSS than I do), you're saying for .hidden-*-up classes, use .d-*-none - so wouldn't that require you to explicitly state each viewport you want hidden? Wouldn't my suggestion of .d-none initially hide everything, and then specifying the viewports we do want visible be shorter/easier?

On viewports where you are hiding 3+ viewports, like .hidden-lg-down, using your recommendation would need to use .d-sm-* .d-md-* .d-lg-* instead of the shorter .d-none .d-xl-*?

Joyrex on 16 Aug 2017

no when you use d-xx-* (where xx also means from)
.d-none .d-lg-* .d-none .d-xl-* (for your examples)

jipexu on 16 Aug 2017

What @jipexu said—just like in v3, these classes apply from their stated viewport _and up_. So, .d-md-none is display: none on md, lg, and xl.

mdo on 16 Aug 2017

👎1

Ah, OK - I think my little brain is getting this. I've updated my table above with hopefully accurate equivalents so others who didn't initially understand how the new display classes work like me helps them.

Joyrex on 16 Aug 2017

Thanks, this is actually pretty useful.
Quick note, for .hidden-xs-up and .hidden-xl-down you could list .d-none (xs-up basically means hide always, same as xl-down) and I think you should shift all the beta equivalents up one row in your table.
For example, .d-none.d-sm-* will show at small or larger, or hide at extra small and lower, so it's equivalent to hidden-xs-down

Here's a little pen for demonstration https://codepen.io/anon/pen/WEdyxQ

36864 on 17 Aug 2017

an other codepen
https://codepen.io/jipexu/pen/dzJyWG

jipexu on 17 Aug 2017

@36864 - You know, I did have them shifted as you mentioned, but I wasn't sure and since @mdo gave some examples, I modified the table to reflect that. Anyone else agree/disagree? I certainly don't want to misrepresent how the system works.

Joyrex on 17 Aug 2017

@Joyrex the table is not correct ... in the table all new class must up (the first NA is in fact the second this will be display only from 576px so in very small screen this will be hidden ...)
as @36864 said .hidden-xs-up and .hidden-xl-down == (about) d.none

jipexu on 17 Aug 2017

@36864 @jipexu - Thanks for the feedback; I've updated the table, and I think now it correctly reflect the equivalents in Beta 1 versus Alpha 6.

Joyrex on 17 Aug 2017

👍1

I made a short video to explain the basics w/ a few examples: https://youtu.be/UG7I7c12d-Y and a codepen example.

devwax on 24 Aug 2017

👍2

These .d-* classes are so inconvenient to use. .hidden-*-up/down were a lot more appealing...

laxika on 6 Sep 2017

👍6 ❤1

Maybe if .d-none also had up/down variations, it could accommodate for both use cases?

@Joyrex great work with that table by the way :)

hugofelp on 8 Sep 2017

👍8 ❤1

I agree at 100% with hugofelp.

SuperPat45 on 8 Sep 2017

100% agree with hugofelp too...

These is at this moment my big problem:
I frecuently use hidden-* classes for change the visibility of "tr" elements within tables....
Now I have no way to solve it because none of the options {block,inline,flex,table,table-cell...} are valid...

Before:
[tr class="hidden-lg-down"]

Now ??
[tr class="d-none d-xl-{what?}"]

So my cuestion is: how to revert back to normal after display:none for table row?

Edited:
ok, I answer myself: display: table-row; is the solution, therefore it is necessary at least one more option:

d-*-table-row

//
// Utilities for common display values
//

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    ...
    .d#{$infix}-table-row    { display: table-row !important; }
  }
}