Bootstrap3 .Visible-* .Hidden-* Display Inline

Bootstrap3 .visible-* .hidden-* display inline

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

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

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

Bootstrap 3.1 visible-xs and visible-sm not working together

If you want to show it at multiple sizes, don't use visible-* but instead hide the other sizes you don't want with hidden-*.
In this case: hidden-md hidden-lg

Missing visible- and hidden- in Bootstrap v4

Update for Bootstrap 5 (2020)

Bootstrap 5 (currently alpha) has a new xxl breakpoint. Therefore display classes have a new tier to support this:

Hidden only on xxl: d-xxl-none

Visible only on xxl: d-none d-xxl-block

Bootstrap 4 (2018)

The hidden-* and visible-* classes no longer exist in Bootstrap 4. If you want to hide an element on specific tiers or breakpoints in Bootstrap 4, use the d-* display classes accordingly.

Remember that extra-small/mobile (formerly xs) is the default (implied) breakpoint, unless overridden by a larger breakpoint. Therefore, the -xs infix no longer exists in Bootstrap 4.

Show/hide for breakpoint and down:

hidden-xs-down (hidden-xs) = d-none d-sm-block
hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block
hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block
hidden-lg-down = d-none d-xl-block
hidden-xl-down (n/a 3.x) = d-none (same as hidden)

Show/hide for breakpoint and up:

hidden-xs-up = d-none (same as hidden)
hidden-sm-up = d-sm-none
hidden-md-up = d-md-none
hidden-lg-up = d-lg-none
hidden-xl-up (n/a 3.x) = d-xl-none

Show/hide only for a single breakpoint:

hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down)
hidden-sm (only) = d-block d-sm-none d-md-block
hidden-md (only) = d-block d-md-none d-lg-block
hidden-lg (only) = d-block d-lg-none d-xl-block
hidden-xl (n/a 3.x) = d-block d-xl-none
visible-xs (only) = d-block d-sm-none
visible-sm (only) = d-none d-sm-block d-md-none
visible-md (only) = d-none d-md-block d-lg-none
visible-lg (only) = d-none d-lg-block d-xl-none
visible-xl (n/a 3.x) = d-none d-xl-block

Demo of the responsive display classes in Bootstrap 4

Also, note that d-*-block can be replaced with d-*-inline, d-*-flex, d-*-table-cell, d-*-table etc.. depending on the display type of the element. Read more on the display classes

Inline objects becomes block while using some (hidden-xs) classes in twitter-bootstrap-3

Since Bootstrap 3 uses..

.hidden-xs {
    display: block !important;
}

You need to do this..

.navbar-btn .hidden-xs {
    display: inline-block !important;
}

@media (max-width: 767px) {
.navbar-btn .hidden-xs {
  display: none!important;
 }
}

to override the block display of the xs span.

http://bootply.com/103026

Bootstrap 3, responsive helper classes, Asteriks

Quoted from the same page, just below:

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;

Because when you're using these utilities, it is just switching between display: none and another display property, you have to specify that end property, whether it is block, inline-block, or inline

Eg:

<div class="visible-xs-block">Visible block-level element on xs screens and up</div>
<div class="visible-sm-inline">Visible inline element on sm screens and up</div>
<div class="visible-lg-inline-block">Visible inline block element on lg screens and up</div>

bootstrap 4 responsive utilities visible / hidden xs sm lg not working

With Bootstrap 4 .hidden-* classes were completely removed (yes, they were replaced by hidden-*-* but those classes are also gone from v4 alphas).

Starting with v4-beta, you can combine .d-*-none and .d-*-block classes to achieve the same result.

visible-* was removed as well; instead of using explicit .visible-* classes, make the element visible by not hiding it (again, use combinations of .d-none .d-md-block). Here is the working example:

<div class="col d-none d-sm-block">
    <span class="vcard">
        …
    </span>
</div>
<div class="col d-none d-xl-block">
    <div class="d-none d-md-block">
                …
    </div>
    <div class="d-none d-sm-block">
                …
    </div>
</div>

class="hidden-xs" becomes class="d-none d-sm-block" (or d-none d-sm-inline-block) ...

<span class="d-none d-sm-inline">hidden-xs</span>

<span class="d-none d-sm-inline-block">hidden-xs</span>

An example of Bootstrap 4 responsive utilities:

<div class="d-none d-sm-block"> hidden-xs           
  <div class="d-none d-md-block"> visible-md and up (hidden-sm and down)
    <div class="d-none d-lg-block"> visible-lg and up  (hidden-md and down)
      <div class="d-none d-xl-block"> visible-xl </div>
    </div>
  </div>
</div>

<div class="d-sm-none"> eXtra Small <576px </div>
<div class="d-none d-sm-block d-md-none d-lg-none d-xl-none"> SMall ≥576px </div>
<div class="d-none d-md-block d-lg-none d-xl-none"> MeDium ≥768px </div>
<div class="d-none d-lg-block d-xl-none"> LarGe ≥992px </div>
<div class="d-none d-xl-block"> eXtra Large ≥1200px </div>

<div class="d-xl-none"> hidden-xl (visible-lg and down)         
  <div class="d-lg-none d-xl-none"> visible-md and down (hidden-lg and up)
    <div class="d-md-none d-lg-none d-xl-none"> visible-sm and down  (or hidden-md and up)
      <div class="d-sm-none"> visible-xs </div>
    </div>
  </div>
</div>

codepen.io/_yatko/pen/ZJXQxy

Documentation

Bootstrap3 .Visible-* .Hidden-* Display Inline