menu

arrow_back How to align button along the bottom edge?

by
1 vote
5e4167ca90a6f551671079.png

How to align button in the right block in one line along the bottom edge with the other buttons? Use 4 Bootstrap, the code card is.

<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>

1 Answer

by
 
Best answer
0 votes
Block .card-body add properties:
"display: flex;
flex-direction: column;"
And the unit with buttons instead of "mb auto": "mt-auto"

so