Я хочу сделать этот сайт в табличном формате, но он отображается только в вертикальной строке

Вот какой вывод я получаю https://i.stack.imgur.com/Tqekd.jpg Я скопировал код карты bootstrap с официального сайта и попробовал много изменений в моем коде, но вывод всегда идет в вертикальной линии. *Пожалуйста, предложите способ сделать его в табличном формате (вероятно, 3 колонки в полном окне), это было бы действительно полезно. *

{% extends 'base.html' %}
{% block content %}
<h1>Products</h1>
<div class="row">
  {% for product in products %}
  <div class="col-sm-4">
    <div class="card" style="width: 18rem;">
      <img src="{{ product.image_url }}" class="card-img-top" alt="..." width="300" height="300">
      <div class="card-body">
        <h5 class="card-title">{{ product.name }}</h5>
        <p class="card-text">${{ product.price }}</p>
        <a href="#" class="btn btn-primary">Add to Cart</a>
      </div>
    </div>[enter image description here][1]
  </div>
  {% endfor %}
</div>
{% endblock %}

Если вы не добавили CSS и JS файлы bootstrap 4 в ваш файл base.html, добавьте следующий файл в ваш код.

<!-- bootstrap.min.css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

<!-- jquery and bootstrap.bundle.min.js -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
Вернуться на верх