Создание ряда карт в bootstrap высотой с самую высокую карту

работаю над небольшим личным проектом, чтобы проверить свои способности в Django и Bootstrap. В настоящее время я могу получить список тестов, детали которых отображаются в отдельной карточке с помощью цикла for, однако некоторые из тестов имеют разную высоту из-за того, что описание каждого теста имеет разную длину. Это выглядит ужасно, и мне интересно, как я могу сделать все карточки одинаковой высоты, как самая высокая/самая высокая карточка. Я пробовал использовать для этого флексбоксы, но первая карточка в ряду уменьшается в ширину.

Вот мой текущий код и то, как он выглядит в браузере:

<div class="row p-2 justify-content-center">
   {% for obj in filter.qs %}
       <div class="col-md-4 mt-4">
           <div class="card p-2" id="quiz">
                <div class="card-body">
                    <div class="row">
                         <div class="col-md-10">
                             <h5 class="card-title">{{ obj.Name }}</h5>
                          </div>
                          <div class="col-md-2 text-right">
                              <i class="far fa-heart"></i>
                          </div>
                    </div>
                    <h6 class="card-subtitle mb-2 text-muted">By: {{ obj.Author }}</h6>
                    <h6 class="card-subtitle mb-2 text-muted">Points: {{ obj.Points_Worth }}</h6>
                    <h6 class="card-subtitle mb-4 text-danger">Category: <a href="">{{ obj.Category }}</a></h6>
                    <p class="card-text">{{ obj.Description }}</p>
                    <a href="#" class="btn btn-primary w-100 mt-auto">Play Quiz</a>
                 </div>
            </div>
        </div>
    {% endfor %}
</div>

Visual representation of code

В идеале, я бы хотел, чтобы все карточки были одинаковой высоты, несмотря на содержание в описании, а кнопка была выровнена по низу.

Я пробовал использовать javascript для получения всех столбцов с классом 'col-md-4' и использовать алгоритм максимума для получения наибольшей высоты, а затем применить это к каждому столбцу, однако мне не повезло с этим.

Я готов попробовать различные методы для достижения этой цели, поэтому любая помощь приветствуется! Если вам нужна дополнительная информация, не стесняйтесь спрашивать!

проблема была решена путем применения правильного CSS flexbox, возможно, я допустил ошибку при чтении предыдущего решения, так как то, которое я использую сейчас, работает идеально, применение h-100 к картам, применение d-flex и flex-column к телу карты и использование mt-auto для кнопки устранило проблему.

{% for obj in filter.qs %}
                    <div class="col-md-4 mt-4 justify">
                        <div class="card p-2 h-100" id="quiz">
                            <div class="card-body d-flex flex-column">
                                <div class="row">
                                    <div class="col-md-10">
                                        <h5 class="card-title">{{ obj.Name }}</h5>
                                    </div>
                                    <div class="col-md-2 text-right">
                                        <i class="far fa-heart"></i>
                                    </div>
                                </div>
                                <h6 class="card-subtitle mb-2 text-muted">By: {{ obj.Author }}</h6>
                                <h6 class="card-subtitle mb-2 text-muted">Points: {{ obj.Points_Worth }}</h6>
                                <h6 class="card-subtitle mb-4 text-danger">Category: <a href="">{{ obj.Category }}</a></h6>
                                <p class="card-text">{{ obj.Description }}</p>
                                <br>
                                <a href="#" class="btn btn-primary w-100 mt-auto">Play Quiz</a>
                            </div>
                        </div>
                    </div>
Вернуться на верх