Карточки бутсрапа, отображаемые только вертикально, а не в табличном формате

Вот код в html
[Вот что отображается на сайте][1] https://i.stack.imgur.com/5bB78.jpg

> {% extends 'base.html' %}
> 
> {% block content %}
>     <h1>Products</h1>
>     <div class="row">
>         {% for product in products %}
>          <div class="col">
>             <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 %}

Это происходит из-за класса col (col то же самое, что и col-12). Каждая карточка всегда будет занимать всю ширину окна просмотра (т.е. 12 колонок).

Если вы хотите иметь 3 карты в ряд, то установите класс col-sm-4, например. У вас будет 3 карты в ряд на больших устройствах и 1 карта в ряд на маленьких устройствах (читайте документы).

{% 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 %}
Вернуться на верх