title: Bootstrap: align 'card's horizontally as a single row
body: <p>i am rendering the 4 items in a row through a for loop , the problem is that in the first line it renders 4 items but the rest of the items that come in the loop are rendered in separate line.</p>
  
  <p><strong>code</strong></p>
  
  <pre><code>&lt;div class="card-group"&gt;
  
      {% for item in wt %}
  
            &lt;div class="card my-3 text-white bg-dark mb-3" style="width: 18rem;"&gt;
  
              &lt;img src="/media/{{item.thumbnail}}" class="card-img-top" alt="..."&gt;
              &lt;div class="card-body"&gt;
                &lt;h5 class="card-title"&gt;{{item.product_name}}&lt;/h5&gt;
                &lt;p class="card-text"&gt;{{item.thumbnail_desc}}&lt;/p&gt;
  
                &lt;a href="blog_detail/{{item.post_id}}" class="btn btn-primary"&gt;View Product&lt;/a&gt;
  
  
              &lt;/div&gt;
            &lt;/div&gt;
  
      {% if forloop.counter|divisibleby:4 %}
      &lt;/div&gt;
      {% endif %}
  
     {% endfor %}
  </code></pre>
  
  <p>here i am using bootstrap and django framework... i also used "row" class but it also doesnt work very well</p>