hidden-xs forces display: block;

[HTMLGuyLLC]

I'm trying to use display: inline-block until it needs to be hidden, but it seems that's not possible right now unless I fight the !important. I took out all the display: block(s) and it hid the div. I guess you're doing the reverse of what I would have assumed. You're just hiding all, and forcing it to show on certain widths. That doesn't make sense to me...Can you think of a fix, justify your reasoning, and let me know what you're doing for the future on this. Thank you.

[HTMLGuyLLC]

Ah, just went back and noticed this "Responsive utilities are currently only available for block-level toggling, meaning display: none; or display: block;. Use with inline and table elements is currently not supported."

[juthilo]

In fact, you can actually use the responsive utilities on table elements now, just not inline elements (see mixins.less#L508-510). Support for toggling inline elements is planned, not guaranteed for Bootstrap 3.1 (#9397).

[Juuro]

I would like to ay, that I would appreciate it if support for toggling inline elements makes its way into Bootstrap. :-)

[michael-langford]

+1

Use case: A button that has text and icon on a large screen just needs icon in mobile view

[GrupoWebex]

That is custom CSS i use for it.
You can change 'a' and 'span' tag.

a span.hidden-xs {display:inline !important;}

@media (max-width: 768px) { 
    a span.hidden-xs {display:none !important;}
}

[wmayner]

+1

Another use-case: A label within a header that gives extra information if there's enough screen real estate.

EDIT: My bad, thanks for the link.

[cvrebert]

This issue is dead. See #8869.