Consider the following two spans:

<span class="hidden-lg-up" style="color: blue; ">Visible on xs, sm and md</span>
<span class="hidden-md-down" style="color: red; ">Visible from lg on, I can be longer</span>

The idea is that only one span is displayed at any given time. The blue one should be displayed on xs, sm and md viewports, while the red one is for lg and xl viewports.

However, in my laptop, when the width of the viewport is reported to be 991px, both spans are displayed.

Here's the reduced test case: JS Bin

To reproduce, manually change the width of the Output iframe until the reported width reaches 991px.

I think that this happens because Chrome reports a width of 991.4 pixels (I've used Chrome DevTools to check this). And the relevant media queries for Bootstrap's hidden responsive utilities are as follows:

@media (max-width: 991px) {
  .hidden-md-down {
    display: none !important;
  }
}
@media (min-width: 992px) {
  .hidden-lg-up {
    display: none !important;
  }
}

This means that, when the width of the viewport is between 991px and 992px (and mine seems to be 991.4px), none of the media queries above evaluates to true, so both spans end up being displayed.

I know that these pixels are not real pixels, but logical CSS pixels, abstracted by the browser. Despite this, I think that Bootstrap should not depend on how the browser converts real pixels to CSS abstracted pixels in order to behave as expected.

Maybe the media queries can be modified to include decimals?
I.e. @media (max-width: 991.999999px)
Here's the idea: JS Bin

OS: windows 10 home
browser: chrome v 55.0.2883.87 m
hardware: asus ux303u notebook pc
display configuration: 3200 real pixels wide, but screen is OS-zoomed to 250% recommended setting