As I was creating a layout to showcase all of the bootstrap cards in a neat and organized manner, I noticed a peculiar issue that's been bothering me. Everything looks great when the columns are filled or when there's only one card present. However, as soon as two cards occupy a column, things start looking awkward as shown in the images below:
https://i.sstatic.net/wphxv.png
https://i.sstatic.net/VwBHA.png
https://i.sstatic.net/ajFfy.png
I'm not satisfied with how the layout appears with two cards in a column. Any suggestions on how to resolve this issue? Here is my current code snippet (written in Jinja2 but the structure should be easy to interpret):
<div class="container" style="margin-top: 100px;">
<div class="row">
{% for clip in clips %}
<div class="col">
<div class="card" style="width: 32rem;">
<div class="card-body">
<h5 class="card-title">{{ clip.title }}</h5>
<h6 class="card-subtitle mb-2 text-muted">
<img src="{{ url_for('static', filename='images/profile-pictures/' ~ clip.user.picture) }}", height="32" width="32" style="border-radius: 50%;">
{{ clip.user.username }}
</h6>
<p class="card-text" style="margin-top: 15px;">
{{ clip.description }}
</p>
{% if clip.clip_id % 2 == 0 %}
<a href="#"><button class="btn-hover color-2">PLAY</button></a>
{% else %}
<a href="#"><button class="btn-hover color-1">PLAY</button></a>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
& The CSS:
.card-body {
padding: 25px;
}
.card {
margin-bottom: 50px;
}