Different behavior with bootstrap on hidden-xs

[Alexey Kuznetsov]

Don't you want to update README with the note about this?
I mean in original bootstrap there's .hidden-xs class like

@media(max-width:$screen-xs-max) {
    .hidden-xs {
        display: none !important;
    }
}

But there's nothing about display property for screen above $screen-xs-max. Your version sets it do display:block.

Consider this code on the large screen:

<span class="hidden-xs">Text</span>

<span> is inline element by default. Bootstrap leaves it to be inline (or as it's defined by other styles). Your code changes it to be block !important, so it's hard to redefine in further code.

I understand that it is not fixable with the way bootstrap-ms works and suggest don't use hidden-xs on non-block elements at all.

[Marc Guay]

Can you fix this by adding the "visible-ms-inline" class?

[Marc Guay]

I see that you can, but it will disappear on sm and up, and if you try to add a visible-sm-inline class it will be overridden by line 683, making it impossible to only hide a non-block element on xs.

[Anders D. Johnson]

We could revisit this. Maybe a set of hidden-*-inline and hidden-*-inline-block classes could be created for finer-grain control - these would restore the element to the given display value below & above the given breakpoint. Anyone want to experiment and submit a pull request? Could also consider other classes as needed for additional display values per https://developer.mozilla.org/en-US/docs/Web/CSS/display.

However, I'm not sure even Bootstrap 4 has a solution for this: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/. So possibly this is a case where custom CSS might be a better approach, at least for now.