Bootstrap 3 class visible-lg moves span to a new line

Question

How do I make class visible-lg not to move the span to a new line?

The following HTML renders as one line:

Device is:         


        

Answer 1

Update for Bootstrap v3.2.0

This is now natively solved in Bootstrap v3.2.0 with this commit

According to the 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;

So in your case, you'd want to use:

<p>Device is:<span class="visible-lg-inline">Large</span></p>

---

Original for Bootstrap v3.0

In Bootstrap 3.0, all visible and hidden responsive classes use display:block !important;
You'll have to override that if you want to display elements inline:

@media (min-width: 1200px) {
  span.visible-lg {
    display: inline !important
  }
}

Working Demo in jsFiddle

For a more robust approach, here is a library that adds extension classes for each display type

---

Other Instances

Asked about on Stackoverflow:

• Bootstrap3 .visible-* .hidden-* display inline

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

Answer 2

The solution to this issue is to set inline style for the span of class="visible_lg" as follows:

style="display: inline !important"

The "!important" is the key since Bootstrap 3 sets this style to "block !important"