grid lines with for loop - django

Question

so I want to have three grid lines, such that <div class="col-6 col-md-4">
each grid line has a content of course. so the code will probably tell what I'm trying to achieve
<div class="row">
<div class="col-6 col-md-4">
{% for all_episode in episode %}
<div class="card">
<a href="{% url 'episode_detail' slug=all_episode.slug %}">
<img class="card-img-top" src='{{all_episode.image.url}}'></a>
<div class="card-body">
<h5 class="card-title">
{{ all_episode.title }}
</h5>
<p class="card-text">{{ all_episode.story |slice:":100" }}...</p>
</div>
<div class="card-footer">
<small class="text-muted">
<span class="h5">
{{ all_episode.series }}
</span> /
<span class="h6">
{{ all_episode.season }}
</span>
</small>
</div>
{% endfor %}
</div>
</div>
</div>
but with the above code i get the cards in align vertically. so one card takes the whole line while there should be three cards.

Answer 1

Be careful with your indentation please. It's difficult to read your code.
You can add your col class with your card div, and you need to have your loop into your row div but outside your col div.
<div class="row">
{% for all_episode in episode %}
<div class="col-6 col-md-4 card">
<a href="{% url 'episode_detail' slug=all_episode.slug %}">
<img class="card-img-top" src='{{all_episode.image.url}}'>
</a>
<div class="card-body">
<h5 class="card-title">
{{ all_episode.title }}
</h5>
<p class="card-text">{{ all_episode.story |slice:":100" }}...</p>
</div>
<div class="card-footer">
<small class="text-muted">
<span class="h5">
{{ all_episode.series }}
</span> /
<span class="h6">
<a href="{% url 'season_detail' slug=all_episode.season.slug %}">{{ all_episode.season }}
</a>
</span>
</small>
</div>
</div>
{% endfor %}
</div>