Align elements in html and css

September 13, 2023

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>

the picture

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>