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 ashidden
)
Show/hide for breakpoint and up:
hidden-xs-up
=d-none
(same ashidden
)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 ashidden-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
Related Topics
ASP.NET MVC CSSrewriteurltransform Multiple Arguments
Changes in CSS Files Are Not Reflected After Deployment
Find Definition of CSS Class in External Stylesheet
Edited Chrome Extension - Chrome Thinks It Is Malware
How to Select a Web Element by Text with Selenium Webdriver, Java
Force Visible Scrollbar in Firefox on MAC Os X
Compressing Fonts for Using in Web
Does Semantic UI Framework Support Rtl Languages
CSS Text-Indent Equivalent on the Right Side
Show Google Picker Inside/Over Modal
How Does CSS Formatting in a Google Maps Bubble Work
Set Button in Position "Fixed" in React Native
Force Flex Element Not to Grow in Cross-Axis Direction