Creating GRID structure using bootstrap and Django

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.