0

enter image description here

How can I align cards in a group? If I install height-full in card-header the whole layout breaks down

    <div class="pb-5 row justify-content-center">
        {% for movie in movie_list %}
            <div class="col-md-4 top-bottom">
                <div class="card mb-4 box-shadow">
                    <div class="card-header text-center align-items-center d-flex justify-content-center">
                        <h4 class="my-0 font-weight-normal">{{ movie.title }}</h4>
                    </div>
                    <div class="card-body">
                        <img class="mx-auto d-block center" src={{ movie.image }} width="150">
                        <ul class="list-unstyled mt-3 mb-4">
                            <li>Рейтинг: {{ movie.vote_average }}</li>
                            <li>Дата выхода: {{ movie.release_date }}</li>
                        </ul>
                        <button type="button" class="btn btn-lg btn-block"
                                onclick="location.href='/movie/{{ movie.id }}'">Выбрать фильм
                        </button>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>

How I want to get enter image description here

3 Answers 3

0

Add the class .h-100 to .card will do the trick.

Codepen

2
  • I wrote that if you add height-full then everything moves out
    – Sonfire
    May 28, 2020 at 7:21
  • @sonfire You said you'd added it to .card-header didn't you? Can you provide a screenshot of how the layout breaks in that case?
    – Ken Wong
    May 28, 2020 at 7:33
0

Because you didn't set card height. If you want they seen same height you must set card height

0

Temporary solution

.card-header{
    min-height: 15vh!important;
    height: 100%!important;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.