Как прижать элемент div class bl вниз Boostrap 5?

Question

[RushV]

Здравствуйте!
Как прижать элемент div вниз класс bl?

<div class="card mb-3 bg-transparent post-box">
                <div class="row g-0">
                  <div class="col-12 col-lg-auto">
                    <img src="/img/post/img-post-1.jpg" class="img-fluid rounded-start w-260" alt="...">
                  </div>
                  <div class="col-12 col-lg">                    
                        <div class="card-body px-post">
                          <h3 class="card-title">Текст</h3>
                            <p class="card-text">Текст2</p>
                            <div class="bl">
                              <div class="row">
                                <div class="col">
                                    <span class="data-post">14.05.2025</span>
                                </div>
                                <div class="col-auto">
                                  <a href="#">Подробнее >></a>
                                </div>
                              </div>
                          </div>
                      </div>
                  </div>
                </div>
              </div>

Comments

[Ankhena]

У родителя должен быть флекс колонками.
У bl margin-top auto.

Альтернатива - flex-grow 1 для параграфа.

[Aragorn]

RushV, напишите ответ и отметьте его решением

[RushV]

Aragorn, Спасибо, всё получилось.

[Aragorn]

RushV, так я говорю - напишите ответ внизу, чтобы другим было легче

Answer 1

[Gosha04ye]

Просто добавь родителю display: flex; flex-direction: column; и прижми .bl вниз через margin-top: auto;.
Что-то вроде:

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

.bl {
  margin-top: auto;
}

Так блок .bl всегда будет уходить к низу карточки, независимо от длины текста выше.