Bootstrap: align 'card's horizontally as a single row - css

Question

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.
code
<div class="card-group">
{% for item in wt %}
<div class="card my-3 text-white bg-dark mb-3" style="width: 18rem;">
<img src="/media/{{item.thumbnail}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{item.product_name}}</h5>
<p class="card-text">{{item.thumbnail_desc}}</p>
View Product
</div>
</div>
{% if forloop.counter|divisibleby:4 %}
</div>
{% endif %}
{% endfor %}
here i am using bootstrap and django framework... i also used "row" class but it also doesnt work very well

Answer 1

It should automatically do 4 to a row without having to add extra code:
{% for item in wt %}
<div class="card my-3 text-white bg-dark mb-3" style="width: 18rem;">
<img src="/media/{{item.thumbnail}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{item.product_name}}</h5>
<p class="card-text">{{item.thumbnail_desc}}</p>
View Product
</div>
</div>
{% endfor %}
If not, try using class "col-md-3" instead of "my-3".
Let me know if this does the trick.

Answer 2

it worked by changing size of the card and also adding forloop's counter... the main problem was the size of the card , it was not fitting in the container
<h2 class="my-4 text-white bg-dark">New Arrivals</h2>
<div class="row">
{% for item in wt %}
<div class="card text-white bg-dark mb-3" style="width: 10rem;">
<img src="/media/{{item.thumbnail}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{item.product_name}}</h5>
<p class="card-text">{{item.thumbnail_desc}}</p>
View Product
</div>
</div>
{% if forloop.counter|divisibleby:4 %}
</div>
<div class="row">
{% endif %}
{% endfor %}
</div>