0

I am working with Bootstrap 4 beta via the CDN, and I am noticing an issue with the new d-* class.

I have a simply div with a class of "d-none d-lg-block" this works as expected, the div is only visible when the screen is above 992px. However if I change the class to "d-none d-md-block", then no matter what I set the screen size to the div is always visible.

Is this a bug in bootstrap 4 beta?

Chris Hawkins
  • 421
  • 3
  • 10
  • 21

2 Answers2

0

As of the bootstrap beta, the class "d-md-block" only has the below media query associated with it.

media (min-width: 768px)
  .d-md-block {
    display: block!important;
}

This ensure's that any element with the class "d-md-block" should always display on widths greater than or equal to 768px.

After testing this with the Bootstrap v4 Beta I can confirm that it's working as intended. Elements with "d-none d-md-block" are hidden for me in screens smaller than 786px using Chrome.

This is not a bug with the Bootstrap beta.

TidyDev
  • 3,470
  • 9
  • 29
  • 51
  • Thanks for the reply. Don't think it is a bug in Bootstrap. But perahps Chrome. I just tested it in Safari, and it is working there. – Chris Hawkins Oct 07 '17 at 17:52
  • Just wanted to add, that it appears that the bug may be when using the Toggle device tool in the dev tools. When resizing the actually window, then it works. – Chris Hawkins Oct 07 '17 at 18:11
0

I had the same issue. What helped is this: 

<meta name="viewport" content="width=device-width, initial-scale=1">

You can see the answer here

user3927840
  • 1
  • 2