I am trying to align the buttons on the card, I already established a minimum height so that they would be the same size regardless of the content but the buttons look bad, look at the photo, I want them to be aligned vertically
this the code
<div class="col" v-for="o in services" :key="o.id">
<div class="card d-flex" style="width: 25rem; min-height: 38rem;" >
<img :src=o.foto class="card-img-top" style="max-height: 15rem;" alt="...">
<div class="card-body">
<h5 class="card-title fs-3">{{o.nombre}}</h5>
<p class="card-text fs-6">{{o.descripcion}}</p>
<a href="#" class="btn btn-primary d-flex justify-content-center mt-3">IR</a>
</div>
</div>
</div>
I hope the buttons align, please help
>Solution :
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col d-flex" v-for="o in services" :key="o.id">
<div class="card d-flex" style="width: 25rem; min-height: 38rem;">
<img :src=o.foto class="card-img-top" style="max-height: 15rem;" alt="...">
<div class="card-body d-flex flex-column">
<h5 class="card-title fs-3">Test</h5>
<p class="card-text fs-6">Testing</p>
<a href="#" class="btn btn-primary mt-auto align-self-end w-100">IR</a>
</div>
</div>
<div class="card d-flex" style="width: 25rem; min-height: 38rem;">
<img :src=o.foto class="card-img-top" style="max-height: 15rem;" alt="...">
<div class="card-body d-flex flex-column">
<h5 class="card-title fs-3">Test</h5>
<p class="card-text fs-6">Testing</p>
<a href="#" class="btn btn-primary mt-auto align-self-end w-100">IR</a>
</div>
</div>
<div class="card d-flex" style="width: 25rem; min-height: 38rem;">
<img :src=o.foto class="card-img-top" style="max-height: 15rem;" alt="...">
<div class="card-body d-flex flex-column">
<h5 class="card-title fs-3">Test</h5>
<p class="card-text fs-6">Testing</p>
<a href="#" class="btn btn-primary mt-auto align-self-end w-100">IR</a>
</div>
</div>
</div>