Having an issue with three cards in a row, they are too close together without any margin. It doesn't look good, so I tried adding margin, but it messes up the responsiveness that Bootstrap provides. So, I decided to add padding only. Any suggestions or help would be greatly appreciated.
<div class="row">
{% for all_episode in episode %}
<div class="col-6 col-md-4 card" style="padding:20px">
<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">
<a href="{% url 'episode_detail' slug=all_episode.slug %}">{{ all_episode.title }}</a>
</h5>
<p class="card-text">{{ all_episode.story |slice:":100" }}...</p>
</div>
<div class="card-footer">
<small class="text-muted">
<span class="h5">
<a href="{% url 'series_detail' slug=all_episode.series.slug %}">{{ all_episode.series }}</a>
</span> /
<span class="h6">
<a href="{% url 'season_detail' slug=all_episode.season.slug %}">{{ all_episode.season }}
</a>
</span>
</small>
</div>
</div>
{% endfor %}
</div>