<p dir="auto">I'm creating pagination like the example in the documentation.  I have previous and next links on each side and links to each page in the middle.</p>
<p dir="auto">Out of the box doesn't look great when I scale down to a phone (wraps in the middle) so I figured I'd put .hidden-xs on the middle page number links so when I view on a phone it's just prev and next.</p>
<p dir="auto">That caused it to look great on the phone, but on larger displays the "display: block !important;" causes the buttons to be stacked vertically.</p>
<p dir="auto">Ideally there should be responsive pagination options.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/e3d58de7b17a01bf9d46877025aed0b65e45e828a52dfb3302f87a317896ae87/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f3134343133362f3937383539302f34373636636539652d303663322d313165332d393537352d3233643232646139373162392e706e67"><img src="https://camo.githubusercontent.com/e3d58de7b17a01bf9d46877025aed0b65e45e828a52dfb3302f87a317896ae87/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f3134343133362f3937383539302f34373636636539652d303663322d313165332d393537352d3233643232646139373162392e706e67" alt="screen shot 2013-08-16 at 5 21 36 pm" data-canonical-src="https://f.cloud.github.com/assets/144136/978590/4766ce9e-06c2-11e3-9575-23d22da971b9.png" style="max-width: 100%;"></a></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>