Bootstrap3 .visible-* .hidden-* display inline

Bootstrap has some nice .visible-* (eg. .visible-lg) class utility for selecting what to show or hide depending on the screen size.

When using those classes, it applies the styling display: block !important; when in the correct screen size.

But sometimes, I'd like to use it for some elements that are displayed inline or inline-block.

How could I cleanly override some bootstrap rules to have the choice? Or should it be a feature request in bootstrap?

---

EDIT

Seems like I'm not the only one wondering about this issue. Here's the github issue.

Thanks for the latest answer!

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:

<!-- language: lang-none --> <pre><code><b>Group of classes</b> | <b>CSS display</b> .visible-*-block | display: block; .visible-*-inline | display: inline; .visible-*-inline-block | display: inline-block; </code></pre>

For example, you could use:

<!-- language: lang-html --> <pre><code>&lt;p&gt;Device is: &lt;span class=&quot;<b>visible-lg-inline</b>&quot;&gt;Large&lt;/span&gt;&lt;/p&gt; </code></pre>

---

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