title: How to Make Responsive Bootstrap 3 Pagination
body: <p>This:
  <img src="https://i.stack.imgur.com/xlnnU.png" alt="enter image description here"></p>
  
  <p>Turns in to this on smaller viewports:</p>
  
  <p><img src="https://i.stack.imgur.com/fbE0J.png" alt="enter image description here"></p>
  
  <p><em>I think it looks yucky and it takes up a lot of space too.</em></p>
  
  <p><strong>This is standard pagination html:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
         &lt;div class="text-center"&gt;
            &lt;ul class="pagination pagination-lg"&gt;
               &lt;li&gt;&lt;a href="#"&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
               &lt;li class="disabled"&gt;&lt;span&gt;...&lt;/span&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;12&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;13&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;14&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;15&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;16&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;&amp;raquo;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
         &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Now, I could use smaller versions with the classes they provide, however everything -- no matter what -- should be friendly for <strong>fat fingers</strong> because some touch devices just as big as desktop devices.</p>