For the past day, I've been trying to resolve an issue. The code I'm currently working with is:
<div class="container">
<div class="row">
{% for post in posts %}
<div class="col-md-6">
<div class="thumbnail">
<img src="{{ post.image.url }}" alt="...">
<div class="caption">
<h3>{{ post.title }}</h3>
<p>{{ post.body|truncatechars:120 }}</p>
<p><a href="#" class="btn btn-primary" role="button">View</a></p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
The desired outcome is to have two columns side by side each displaying an image. Currently, the first row displays two images properly but on the second row only one image is displayed. There seems to be no margin or padding that would prevent two images from being displayed on every other row.