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

Profile picture for Hidalgo
Hidalgo

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

The following HTML renders as one line:

<p>Device is:<span>Unknown</span></p>

However, the following HTML renders Large on the line below Device is:

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

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:

<!-- 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>

So in your case, you'd want to 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>

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:

<!-- language: lang-css --> 
@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:

Reported in Bootstrap Issues: