title: Bootstrap Pagination between navigation elements
body: <p>I tried different plugins like bootstrap-paginator and bootstrap-pagination-js to make pagination through dynamically generated <code>&lt;li&gt;</code> elements , so that they don't exceed one line.</p>
  
  <p>The wanted result : One line of dates with next and previous buttons respectively in the right and in the left .</p>
  
  <p>The plugins that I've tried have not been useful to me .</p>
  
  <p>My code looks like this:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-12 column"&gt;      
          &lt;ul class="nav nav-pills center-pills text-center"&gt;         
              &lt;li class="active"&gt;
                  &lt;a href="#"&gt;
                  &lt;span class="text-center badge pull-right span-list"&gt;1&lt;/span&gt;
                  1 Mars
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=""&gt;&lt;a href="#"&gt;2 Mars&lt;/a&gt;&lt;/li&gt;
              &lt;li class=""&gt;&lt;a href="#"&gt;3 Mars&lt;/a&gt;&lt;/li&gt;
              &lt;li class=""&gt;&lt;a href="#"&gt;4 Mars&lt;/a&gt;&lt;/li&gt;
              &lt;li class=""&gt;&lt;a href="#"&gt;etc&lt;/a&gt;&lt;/li&gt;
              &lt;li class=""&gt;&lt;a href="#"&gt;etc&lt;/a&gt;&lt;/li&gt;
              &lt;li class=""&gt;&lt;a href="#"&gt;etc&lt;/a&gt;&lt;/li&gt;
              &lt;li class=""&gt;&lt;a href="#"&gt;etc&lt;/a&gt;&lt;/li&gt;
              &lt;li class=""&gt;&lt;a href="#"&gt;etc&lt;/a&gt;&lt;/li&gt;
              &lt;li class=""&gt;&lt;a href="#"&gt;etc&lt;/a&gt;&lt;/li&gt;
              &lt;li class=""&gt;&lt;a href="#"&gt;etc&lt;/a&gt;&lt;/li&gt;
              &lt;li class=""&gt;&lt;a href="#"&gt;etc&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;       
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The code <a href="http://jsfiddle.net/5ELfQ/" rel="nofollow">fiddle</a> .</p>
  
  <p>Your suggestions will be very welcome .</p>