title: Django blogs not looping properly
body: <p>I have created a blog with Django that I originally looped through each post with:</p>
  
  <pre><code>&lt;div class="container"&gt;
  
  &lt;h2 class="latest-posts"&gt;Latest Posts&lt;/h2&gt;
  &lt;hr /&gt;
  
  {% for post in posts.all %}
  
  &lt;h4&gt;&lt;a href="{% url 'post_detail' post.id %}"&gt;{{ post.title }}&lt;/a&gt;&lt;/h4&gt;
  &lt;i class="fa fa-calendar" aria-hidden="true"&gt;&lt;/i&gt; {{ post.pub_date_pretty }}
  
  &lt;img src="{{ post.image.url }}" class="img-responsive center-sm-block" style='width:75%; text-align:center;' /&gt;
  &lt;br/&gt;
  &lt;p&gt;{{ post.summary }}&lt;/p&gt;
  &lt;br/&gt;
  &lt;br/&gt;
  
  {% endfor %}
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Which worked great! But I didn't just want to have a linear list of post and wanted to display each unique post in a bootstrap card which I attempted with this solution:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;h2 class="latest-posts"&gt;Latest Posts&lt;/h2&gt;
      &lt;hr /&gt;
  
      {% for post in posts.all %}
  
      &lt;div class="row"&gt;
  
          &lt;div class="col-12 col-md-6"&gt;
              &lt;!-- Card --&gt;
              &lt;article class="card animated fadeInRight"&gt;
                  &lt;div class="card-block"&gt;
                      &lt;h4 class="card-title"&gt;&lt;a href="{% url 'post_detail' post.id %}"&gt;{{ post.title }}&lt;/a&gt;&lt;/h4&gt;
                      &lt;h6 class="text-muted"&gt;Antoine de Saint-Exupéry&lt;/h6&gt;
                      &lt;p class="card-text"&gt;{{ post.summary }}&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="card-block text-center"&gt;
                      &lt;div class="btn-group hidden-sm-down hidden-md-down" role="group" aria-label="Card buttons"&gt;
                          &lt;a href="#" class="card-link"&gt;Read more&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;img class="card-img-bottom img-responsive" style='width:100%; text-align:center;' src="{{ post.image.url }}" alt="White sand" /&gt;
              &lt;/article&gt;&lt;!-- .end Card --&gt;
          &lt;/div&gt;
  
          &lt;div class="col-12 col-md-6"&gt;
              &lt;!-- Card --&gt;
              &lt;article class="card animated fadeInRight"&gt;
                  &lt;div class="card-block"&gt;
                      &lt;h4 class="card-title"&gt;&lt;a href="{% url 'post_detail' post.id %}"&gt;{{ post.title }}&lt;/a&gt;&lt;/h4&gt;
                      &lt;h6 class="text-muted"&gt;Antoine de Saint-Exupéry&lt;/h6&gt;
                      &lt;p class="card-text"&gt;{{ post.summary }}&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="card-block text-center"&gt;
                      &lt;div class="btn-group hidden-sm-down hidden-md-down" role="group" aria-label="Card buttons"&gt;
                          &lt;a href="#" class="card-link"&gt;Read more&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;img class="card-img-bottom img-responsive" style='width:100%; text-align:center;' src="{{ post.image.url }}" alt="White sand" /&gt;
              &lt;/article&gt;&lt;!-- .end Card --&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      {% endfor %}
  
  &lt;/div&gt;&lt;!-- End container --&gt;
  </code></pre>
  
  <p>However each unique post now displays twice in a card:</p>
  
  <p><a href="https://i.stack.imgur.com/EMdCe.png" rel="nofollow noreferrer">First row of posts</a></p>
  
  <p><a href="https://i.stack.imgur.com/CYzH9.png" rel="nofollow noreferrer">Second row of posts</a></p>
  
  <p>Any help would be greatly appreciated! This is my first Django project and I have gotten pretty far already. However this is tripping me up quite badly.</p>
  
  <p>Edit: Just to clarify I need to have a second post in that card is what I'm asking. I want two cards displayed side by side, each with a unique post</p>