Как блок опустить вниз?

Question

[evomed]

Код карты Бутстрап https://www.codeply.com/p/1ytSvEIAcK

Под текстом есть блок авторов (Карабас Барабас). Мне нужно, чтобы он всегда был внизу у края карты, независимо от размера основного текста. Сейчас, когда текст маленький, блок авторов не прижимается к краю и поднимается вверх (как в примере).

Answer 1

[Виталий Першин]

Если только классами Bootstrap 5:

<div class="card">
        <div class="row">
            <div class="col-auto">
                <img src="https://cdn.culture.ru/images/e877b062-aafe-5d26-bd6d-2f1d9c37f63e" class="img-fluid imageCard rounded-left" alt="">
            </div>
            <div class="col d-flex">
                <div class="card-body px-2 d-flex flex-column flex ">
                    <h4 class="card-title">Игры авторов Gotham Knights</h4>

                    <div class="mb-2 d-flex align-items-center">

                    20-го февраля

                    </div>

                    <p class="card-text">
                        Одним из самых неудачных релизов прошлого года.
                    </p>

                    <small class="mt-auto">
                       Карабас Барабас, Мурзилка
                    </small>

                </div>
            </div>

            <div class="col-2 text-center mb-2 mr-3">

          <button type="button" class="btn btn-success">Success</button>

            </div>

        </div>
    </div>

Answer 2

[lexchz]

.card-body {
height: 100%;
display: flex;
flex-direction: column;
}

.card-text {
flex-grow: 1;
}