In this article we will write a code to display list of items as below
Here is the code for this.
{% extends "components/base.html" %}
{% block content %}
<div class="container-fluid">
{% if context %}
<div class="row">
{% for product in context %}
<div class="col rounded border border-light mt-3 ml-3 shadow">
<img src={{product.productBaseInfoV1.imageUrls.400x400}} class="mt-3 mb-3" style="max-width: 200px;max-height: 200px;width: auto;height: auto;margin: auto;">
<p class="card-text">{{product.productBaseInfoV1.title}}</p>
<a href="{% url 'ecomm:details' product.productBaseInfoV1.productId %}" >Go to Details page</a>
</div>
{% if forloop.counter|divisibleby:4 %}
</div>
<div class="row">
{% endif %}
{% endfor %}
</div
{% else %}
<p>No tasks are available.</p>
{% endif %}
</div>
{% endblock %}
This code is written for django but bootstrap and html part can be used for any other framework without any challenge.
You can remove following part without any impact.
{% if forloop.counter|divisibleby:4 %}
</div>
<div class="row">
{% endif %}
{% endfor %}
My requirement was to have 4 item in a row and hence I had kept it but its not necessary and code will work flawlessly.