Как прижать div к низу?

Question

[Tereverda]

В сетке с карточками товаров, разная высота, кнопку нужно прижать к низу div, как это сделать при помощи Bootsterap?
С флексбоксами долго возился, не понял, как это сделать в текущей верстке.

<div class="product-card">
      <!-- Изображение -->
      <figure>
   
      </figure>
      <h5 class="product-title"></h5><!-- Название товара -->

      <!-- Атрибуты товара  product-attribute-height-->
 

      <!-- Цена -->
      <span class="h5"></span>

      <!-- Кнопка купить -->
      <div class="d-grid gap-2 mt-2">
        <a class="btn btn-outline-secondary" href="" role="button">Прижать к низу родительского элемента</a>
      </div>
  </div>

Comments

[Ankhena]

Вы уверены, что там есть к низу или к верху? Обведите рамочками div и ссылку.

За вертикальное выравнивание в данном случае отвечает align-items.

Но я почему-то думаю, что это div нужно прижать к низу родителя.
Этому product-card задайте флекс колонками.
Этому <div class="d-grid gap-2 mt-2"> задайте margin-top: auto

Теперь перепишите это на бутстрап.

Answer 1

[Smirator]

Привет. Попробуй:
<div class="fixed-bottom">...</div>

Почитай: https://bootstrap-4.ru/docs/4.0/utilities/position/

Comments

[Tereverda]

Ваш класс фиксирует липкий низ по отношению ко всей странице.
Мне нужно по отношению к родительскому диву.

Answer 2

[Linnkalin]

можно сделать display: flex у родителя, а у div, внутри которого кнопка, указать margin-top: auto, примерно так https://codepen.io/linnloss1/pen/JjOEKZx