I am currently facing an issue with the layout of my template:
<center>
<form class="site-form" action="{% url 'movie:recommend'%}" method="post">
{% csrf_token %}
<input style="font-color:#000000;color: #008000" type="Submit" value="Recommend">
</center>
<br></br>
<div class ="container">
<div class="row">
{% for movie in movies %}
<div class="col-md-4 col-lg-3">
<div class="card h-12">
<div class="card-deck">
<div class="card text-center" style="width:20rem;">
<img class="card-img-top" src="{{movie.img_url}}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">{{movie.title}}</h5>
<a href="{% url 'movie:explore' movie.id %}" class="btn btn-dark">Explore</a>
</div>
</div>
</div>
</div>
<br></br>
</div>
{% endfor %}
</div>
My intention was to have the cards displayed as follows:
card1 card2 card3 card4
card5 card6 card7 card8
.
.
and so on
However, the current layout is not consistent. Some rows are missing cards completely, like card5, card6, card7, and at random points the format gets distorted.
How can I resolve this issue?