I'm struggling to showcase the elements in thumbnail format side by side using Bootstrap, but every time I try to do so within a for loop, they end up getting displayed on separate lines. Here's my code:
{% for book in all_books %}
<div class="row">
<div class="clearfix">
<div class="col-md-2">
<div class="thumbnail">
<a href="https://en.wikipedia.org/wiki/Inferno_(Dan_Brown_novel)"
target="_blank"><img src="{{book.book_cover}}" alt="Book1"
style="width:60%">
<div class="caption">
<p>{{book.title}} - {{book.author}}</p>
</div>
</a>
</div>
</div>
</div>
</div>
{% endfor %}