@MIKHAN__GO

Как упорядочить карточки в bootstrap?

Не могу упорядочить карточки в bootstrap по три в ряд, подскажите, как это сделать?
снизу прикреплю код html и картинку расположения карточек bootstrap

{% extends 'base.html' %}

{% block title %}
<title>Онлайн магазин</title>
{% endblock %}

{% block body %}
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
    <h1 class="display-4">Товары</h1>
    <p class="lead">Товары нашего сайта, которые вы можете приобрести</p>
  </div>
  
  <div class="container">
    <div class="card-deck mb-3 text-center">
    {% if data|length > 0 %}
    {% for el in data %}
    <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0 font-weight-normal">{{el.title}}</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title pricing-card-title">{{el.price}}<small class="text-muted">руб.</small></h1>
          <p>{{el.text}}</p>
          <a class="btn btn-outline-primary" href="#">Купить товар</a>
        </div>
      </div>
    {% endfor %}
    </div>  
    {% else %}
    <h1>У нас ещё нет товаров)</h1>
    {% endif %}
{% endblock %}

5f322a8bba4a2805369377.png
  • Вопрос задан
  • 34 просмотра
Пригласить эксперта
Ответы на вопрос 1
sashabeep
@sashabeep
Дней без вопросов про Slick на тостере : 0
card должен быть вложен в col с указанием ширины. Колонки должны быть вложены в строку - row
https://getbootstrap.com/docs/4.0/layout/grid/
Можно заюзать мой CSS хелпер для одинаковых повторяющихся колонок https://github.com/sashabeep/bootstrapblockgrid
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Rusprofile Москва
от 100 000 ₽
DATUM Soft Ростов-на-Дону
от 60 000 до 75 000 ₽
Sellavi Москва
от 60 000 до 90 000 ₽
23 сент. 2020, в 20:17
100000 руб./за проект
23 сент. 2020, в 20:15
12000 руб./за проект
23 сент. 2020, в 20:14
1000 руб./за проект