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:

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

This has been sort of fixed in v3.1.

.visible-lg or .visible-md will force display: block !important; but using .hidden-xs or .hidden-sm will display inline.

The following library extends the visible helper classes with inline & inline-block variations:

https://github.com/moappi/bootstrap.inline-responsive

Implements the following:

• visible-inline-*
• hidden-inline-*

and

• visible-inline-block-*
• hidden-inline-block-*

Updating to bootstrap 3.1 or above indeed solves the problem as from this point on the hidden- classes only hide the tag and don't set display: block anymore. This way you can use <div> for block context and <span> for inline-block context (the normal behavior of these tags)