Почему мои Bootstrap карты не располагаются вертикально, как примеры на их сайте?

Question

Я создаю веб-приложение для чата, и у меня есть несколько изображений, хранящихся в корзине Amazon S3. Я oop через мои серверы, которые хранятся в базе данных MongoDB, и извлекает все серверы, которые были созданы. Каждый из серверов имеет свое собственное уникальное изображение, которое отображается в списке серверов, и они несовместимы по высоте и ширине.

Когда я пытался отобразить их, используя класс карт-колоды Bootstrap, я находился под создается впечатление, что все они должны отображаться одинаково по высоте и ширине, но это не так для меня.

Вот l oop, который я запускаю, чтобы выбрать и отобразить серверы:

<% _.forEach(chunks, function(val){ %>
                <div class="row">
                    <div class="col-12 col-lg-3 col-md-4 col-sm-6">
                        <div class="card-deck">
                            <% _.forEach(val, function(val2) { %>
                            <div class="card h-100">
                                <form action="/home" method="post" id="fav" class="text-center m-0">
                                    <a href="/servers/<%= val2.name.replace(/ /g, "-") %>">
                                        <img src="www.amazondatabase.com/<%= val2.image %>" class="card-img-top img-fluid" alt="">
                                    </a>
                                    <div class="card-body">
                                        <h5 class="card-title"><%= val2.name %> (<%= val2.members.length %>)</h5>
                                        <input type="hidden" name="serverId" id="id" value="<%= val2._id %>">
                                        <input type="hidden" name="serverName" id="server_name"
                                               value="<%= val2.name %>">
                                        <button class="btn btn-outline-info btn-block mt-2">Join Server</button>
                                    </div>
                                </form>
                            </div>
                            <% }) %>
                        </div>
                    </div>
                </div>
            <% }) %>

Когда я запускаю этот код, я получаю следующий вывод:

Как вы можете видеть, карты имеют разную высоту и размер нижнего колонтитула выстраиваются Как бы я достиг результатов, аналогичных приведенному здесь на их веб-сайте? как предоставление картам класса h-100, чтобы сделать высоту карт 100%, но у меня все еще есть карты переменной высоты. Я также попытался добавить класс к изображениям, чтобы сделать их отзывчивыми, но это тоже не работает.