Как показать 3 карты подряд в системе Bootstrap Grid

Я пытаюсь добавить 3 карты подряд, используя систему сетки начальной загрузки, но проблема в том, что когда я использую цикл Django, каждая карта отображается сама по себе в каждой строке, а это не то, что я хочу. Я искал ответ и добавил его, чтобы показать свою пробную версию, но это не сработало.

Вот template.html перед добавлением цикла django

<div class = "row row-cols-1 row-cols-md-3 g-4">
  <div class = "col">
    <div class = "card h-100">
      <img
        src = ""
        class = "card-img-top"
        alt = "..."
      />
      <div class = "card-body">
        <h5 class = "card-title">Card title</h5>
        <p class = "card-text">
          This is a wider card with supporting text below as a natural lead-in to
          additional content. This content is a little bit longer.
        </p>
      </div>
      <div class = "card-footer">
        <small class = "text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class = "col">
    <div class = "card h-100">
      <img
        src = ""
        class = "card-img-top"
        alt = "..."
      />
      <div class = "card-body">
        <h5 class = "card-title">Card title</h5>
        <p class = "card-text">
          This card has supporting text below as a natural lead-in to additional
          content.
        </p>
      </div>
      <div class = "card-footer">
        <small class = "text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class = "col">
    <div class = "card h-100">
      <img
        src = ""
        class = "card-img-top"
        alt = "..."
      />
      <div class = "card-body">
        <h5 class = "card-title">Card title</h5>
        <p class = "card-text">
          This is a wider card with supporting text below as a natural lead-in to
          additional content. This card has even longer content than the first to show
          that equal height action.
        </p>
      </div>
      <div class = "card-footer">
        <small class = "text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Вот после цикла django

{% for item in object_list %}

<div class = "card-group">
  <div class = "col">
    <div class = "card h-100">
      <embed
        src = "{{ item.image.url }}"
        class = "card-img-top"
        alt = "..."
      />
      <div class = "card-body">
        <h5 class = "card-title">{{ item.title }}</h5>
            <h4 class = "font-weight-bold blue-text">
                <strong>
                    {% if item.discount_price %}
                    <small><span class = "badge badge-pill danger-color">Discount was <del>${{ item.price }}</del></span></small>
                    <br>
                    Now ${{ item.discount_price }}
                    {% else %}
                    ${{ item.price}}
                    {% endif %}
                </strong>
            </h4>
        <p class = "card-text">
        {{ item.description }}
        </p>
      </div>
      <div class = "card-footer">
        <small class = "text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>
{% endfor %}

Как настроить 3 карты подряд и зафиксировать этот размер? Там нет файла CSS, это только загрузчик, и он отлично работает без django, но когда я удаляю карту, она увеличивается, подгоняя любые карты, доступные для столбца.