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!
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>
Asked about on Stackoverflow:
Reported in Bootstrap Issues: