-1

I am interested to learn whether there are rendering differences between Bootstrap 3 and 4 Display Classes, given there is a 1-to-1 mapping between the class names and no perceivable other differences. So I am ignoring why this has been done.

In Bootstrap 3 you could have a Display Property like this:

<div class="hidden-xs">...</div>

In Bootstrap 4 the equivalent is:

<div class="d-none d-sm-block">...</div>

As far as I can tell, the rendered output from these 2 things is identical. So ignoring "why" the names have been changed, is there any other difference between these two statements from a rendering perspective? Or, do they do identical things?

Missing visible-** and hidden-** in Bootstrap v4 shows us that there is a 1-to-1 mapping between various Bootstrap 3 classes and the Bootstrap 4 equivalent.

Are they identical in terms of rendering or do the additional class names in Bootstrap 4 provide other functionality?

The linked post does not answer this question, because it says:

The hidden-* and visible-* classes no longer exist in Bootstrap 4. If you want to hide an element on specific tiers or breakpoints in Bootstrap 4, use the d-* display classes accordingly.

It then goes on to show a 1-to-1 mapping for every Bootstrap 3 class name to the Bootstrap 4 equivalent. This does not confirm or deny whether there are other differences between what these display classes do in 4 vs 3. Therefore this is a legitimate question that needs a definitive answer.

Please be aware:

  1. The proposed duplicate does not answer this question.
  2. Many people use Bootstrap 3 and 4 - or are migrating from one version to another. Knowing the answer to this is useful as it helps ensure they are not changing rendering behaviour inadvertently.
  3. The Bootstrap 3 (or 4) docs don't answer it.
halfer
  • 19,824
  • 17
  • 99
  • 186
Andy
  • 5,142
  • 11
  • 58
  • 131
  • I believe they are identical as all it does is change the elements CSS `display` attribute for different screen sizes. – Halden Collier Nov 26 '19 at 09:24
  • Thank you, this is the most sensible response I've had to this question. I'm looking for confirmation. I also "believe" they are equivalent but that's what I'm trying to ascertain for certain. – Andy Nov 26 '19 at 09:25
  • 1
    I shall double check and let you know – Halden Collier Nov 26 '19 at 09:25

1 Answers1

2

The class hidden-xs will just add display: none !important. You can look for youself in the minified version of Bootstrap 3 here.

Because Bootstrap 4 is different in the sense that it works from mobile first, so the class d-none does act slightly differently to that in Bootstrap 3.

The difference between the two is no more than a media query.

So to answer you question:

BS3's hidden-xs class adds display: none !important; just the same as d-none but because BS3 isn't mobile first, hidden-xs will only add that property when the view size is mobile (<= 767px). Whereas d-none will add the property on every screen size.

In order to get the same effect from hidden-xs in BS4 the equivilent would be d-none d-sm-block.

Read more about Bootstrap 4's display classes here.

Halden Collier
  • 845
  • 7
  • 18
  • Thank you, that's very helpful and the information I was looking for. I believe this will be useful to other Bootstrap users and can't really understand why it was such a battle to get this question answered. – Andy Nov 26 '19 at 09:40
  • 1
    No worries, glad I could help. I'm not entirely sure why people were closing your questions either, I think it's an entirely valid post. – Halden Collier Nov 26 '19 at 09:44