title: Gap between Extra Items in Bootstrap Thumbnail Grid
body: <p>A list of N objects needs to be rendered as follows:</p>
  
  <pre><code>[Thumbnail 1] [Thumbnail 2] [Thumbnail 3] [Thumbnail 4]
  
  [Thumbnail 5] [Thumbnail 6]
  </code></pre>
  
  <p>The number of objects, N, is dynamic. Assume N is 6 in above case for illustration purpose, <strong>the gap between last two extra items (thumbnail 5, 6) is consistent with the gap in first row.</strong></p>
  
  <p>However, my code always displays the last row like this</p>
  
  <pre><code>[Thumbnail 1] [Thumbnail 2] [Thumbnail 3] [Thumbnail 4]
  
  [Thumbnail 5]               [Thumbnail 6]
  </code></pre>
  
  <p>Could you please point out how to correct this non-consistent gap in the last row?</p>
  
  <p>In my Django template, here is the code</p>
  
  <pre><code>&lt;div class='row row-flex movie-thumbnails clearfix'&gt;
  
  {% for movie in object_list %}
    &lt;div class='col-md-3'&gt;
    {% include "movie/movie_thumbnail.html" with movie=movie %}
    &lt;/div&gt;
    {% cycle '' '' '' '&lt;/div&gt;&lt;div class="row row-flex movie-thumbnails clearfix"&gt;' %}
  {% endfor %}
  
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>.row-flex</code> class is to ensure all thumbnails having the same height.</p>