I am facing an issue while attempting to display 3 cards in a row using the Bootstrap grid system. The problem arises when I use a Django loop, as each card is being displayed in a separate row instead of side by side as intended. I have tried implementing solutions I found online, but none have worked so far.
Below is the template.html code before adding the Django loop:
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
...
</div>
<div class="col">
...
</div>
<div class="col">
...
</div>
</div>
And here is the code after implementing the Django looping:
{% for item in object_list %}
...
{% endfor %}
The challenge now is to ensure that the cards are displayed correctly with 3 in a row and each fixed at a specific size. As there is no external CSS file, only Bootstrap is being used. It works fine without Django, however, removing a card results in the remaining cards expanding to fill the column. How can I resolve this issue?