<h2 dir="auto">Background:</h2>
<p dir="auto">I have some buttons on my website that have a glyphicon plus text.</p>
<p dir="auto">I would like to be able to use hidden-xs on a span around the text inside the button.  When the screen is xs (&lt;768px) the button only shows the glyphicon.  And when the screen is &gt; 767px the text shows along side the glyphicon.</p>
<p dir="auto">But the issue is that the <code class="notranslate">hidden-xs</code> (and all other <code class="notranslate">hidden-*</code> classes) use a <code class="notranslate">display: block !important</code> to show the hidden content.  THis causes the button to break into two lines.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;button class=&quot;btn btn-grey&quot;&gt;
    &lt;span class=&quot;glyphicon glyphicon-chevron-up&quot;&gt;&lt;/span&gt;
    &lt;span class=&quot;hidden-xs&quot;&gt;Top Of Page&lt;/span&gt;
&lt;button&gt;"><pre class="notranslate"><code class="notranslate">&lt;button class="btn btn-grey"&gt;
    &lt;span class="glyphicon glyphicon-chevron-up"&gt;&lt;/span&gt;
    &lt;span class="hidden-xs"&gt;Top Of Page&lt;/span&gt;
&lt;button&gt;
</code></pre></div>
<p dir="auto">When the screen is smaller than 768px, the button looks correct:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/958af3e1b6b060597a6c7c9ee9cac22755bbe9c8cbd484fb9a369698bf34aa73/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f323738313536312f313839383430342f61323461623938322d376331622d313165332d396539392d6638313838323461613364322e504e47"><img src="https://camo.githubusercontent.com/958af3e1b6b060597a6c7c9ee9cac22755bbe9c8cbd484fb9a369698bf34aa73/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f323738313536312f313839383430342f61323461623938322d376331622d313165332d396539392d6638313838323461613364322e504e47" alt="bootstrap-lt768" data-canonical-src="https://f.cloud.github.com/assets/2781561/1898404/a24ab982-7c1b-11e3-9e99-f818824aa3d2.PNG" style="max-width: 100%;"></a></p>
<p dir="auto">But then the screen is 768px or greater, the button looks like this:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/12149688ac1501e8307b91b46c9cbd7ceb28da337ba9d0912e64eb5803350ee4/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f323738313536312f313839383430372f62316338313963322d376331622d313165332d396236312d3534626537316430633664302e504e47"><img src="https://camo.githubusercontent.com/12149688ac1501e8307b91b46c9cbd7ceb28da337ba9d0912e64eb5803350ee4/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f323738313536312f313839383430372f62316338313963322d376331622d313165332d396236312d3534626537316430633664302e504e47" alt="bootstrap-img-bad" data-canonical-src="https://f.cloud.github.com/assets/2781561/1898407/b1c819c2-7c1b-11e3-9b61-54be71d0c6d0.PNG" style="max-width: 100%;"></a></p>
<p dir="auto">But it should look like the following:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/4ba84697ec10b148255fc817f30124c27fc47766bde05dbd82aab527602039ea/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f323738313536312f313839383431342f63356463366434362d376331622d313165332d393965382d3163663536663463356135382e504e47"><img src="https://camo.githubusercontent.com/4ba84697ec10b148255fc817f30124c27fc47766bde05dbd82aab527602039ea/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f323738313536312f313839383431342f63356463366434362d376331622d313165332d393965382d3163663536663463356135382e504e47" alt="bootstrap-img-correct" data-canonical-src="https://f.cloud.github.com/assets/2781561/1898414/c5dc6d46-7c1b-11e3-99e8-1cf56f4c5a58.PNG" style="max-width: 100%;"></a></p>
<h2 dir="auto">Possible Solution</h2>
<p dir="auto">What I have done is to add my own media query CSS entries to modify the behavior when <code class="notranslate">hidden-xs</code> is inside a button.  Rather than setting <code class="notranslate">display</code> to <code class="notranslate">block !important</code>, I have the <code class="notranslate">display</code> set to ``inline !important`:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@media (min-width: 768px) {
    button&gt;.hidden-xs, .btn&gt;.hidden-xs {display: inline !important; }
}"><pre class="notranslate"><code class="notranslate">@media (min-width: 768px) {
    button&gt;.hidden-xs, .btn&gt;.hidden-xs {display: inline !important; }
}
</code></pre></div>
<p dir="auto">It would be nice to see something like this included in a future release of Boostrap.</p>
<p dir="auto">related to issues <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="16856611" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/8500" data-hovercard-type="pull_request" data-hovercard-url="/twbs/bootstrap/pull/8500/hovercard" href="https://github.com/twbs/bootstrap/pull/8500">#8500</a> , <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="14075731" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/7808" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/7808/hovercard" href="https://github.com/twbs/bootstrap/issues/7808">#7808</a> , <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="6609454" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/4929" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/4929/hovercard" href="https://github.com/twbs/bootstrap/issues/4929">#4929</a> ; using <code class="notranslate">.hidden-sm</code> to hide span within <code class="notranslate">.nav &gt; li &gt; a</code> .  Because class is <code class="notranslate">display: block</code> above -sm then text wraps to new line.  Would you consider <code class="notranslate">.hidden-*</code> classes to be <code class="notranslate">display: inline-block</code> instead ?</p>
<p dir="auto">Here's a jsfiddle of the two cases - but the repercussions could be greater outside of this situation so probably needs more consideration...  <a href="http://jsfiddle.net/jholl/P86yf/" rel="nofollow">http://jsfiddle.net/jholl/P86yf/</a></p>