Как выровнять кнопки по нижнему краю?

Question

[YuriyCherniy]

Как выровнять кнопки в правом блоке в одну линию по нижнему краю с остальными кнопками? Использую Bootstrap 4, код карточки сейчас такой.

<div class="card mx-auto mb-2" style="width: 22rem;">
      <a href="item-{{ object.pk }}"><img src="{{ object.image.url }}" class="card-img-top"
          alt="{{ object.title }}"></a>
      <div class="card-body">
        <h5 class="card-title">{{ object.title }}</h5>
        <p class="card-text">{{ object.description|truncatechars:100 }}</p>

        <div class="row mb-auto">
          <a href="item-{{ object.pk }}" class="btn btn-outline-primary mx-auto">{{ object.price }} ₽</a>
          <a href="tel:{{ phone_number }}"
            class="btn {% if phone_number %}btn-outline-primary{% else %}btn-outline-danger{% endif %} mx-auto">Позвонить</a>
          <a href="//wa.me/{{ phone_number }}"
            class="btn {% if phone_number %}btn-outline-success{% else %}btn-outline-danger{% endif %} mx-auto">WhatsApp</a>
        </div>

      </div>
    </div>

Answer 1

[nuffyweb]

Блоку .card-body добавьте свойства:
"display: flex;
flex-direction: column;"
А у блока с кнопками вместо "mb-auto": "mt-auto"

вот так

Comments

[YuriyCherniy]

Класс! Спасибо большое!