Update for Bootstrap v3.2.0
This is now natively solved in Bootstrap v3.2.0 with this commit
According to the new responsive classes documentation:
As of v3.2.0, the .visible-– classes for each breakpoint come in three variations, one for each CSS display property value listed below:
Group of classes | CSS display
.visible-*-block | display: block;
.visible-*-inline | display: inline;
.visible-*-inline-block | display: inline-block;
For example, you could use:
<p>Device is: <span class="visible-lg-inline">Large</span></p>
Other Instances
Asked about on Stackoverflow:
- Bootstrap 3 class visible-lg moves span to a new line
Reported in Bootstrap Issues:
- #4929 – Responsive utility classes may cause unexpected wrapping
- #7808 – Using display inherit in responsive utilities causes elements to be wrongly displayed
- #8500 – responsive class usage with inline element
- #8869 – responsive .hidden-* classes change from display block to inline-block
- #10263 – visible-xs makes display=block even for inline elements