how to vertically align the content of a card in bootstrap?

Question

im trying make a card like this:

Example Card

but, i can't to do that the items are on the bottom:

My Card

Code:

<div class="container">
  <div class="row row-cols-1 row-cols-md-2 g-3 my-3">
    <div class="col">
      <div class="card text-uppercase">
        <img src="/../../assets/img/Affiliate_1fdd38b1-d99f-4d5a-b1ee-c4d30397dd2c_643x450.webp" class="card-img" alt="...">
        <div class="card-img-overlay">
          <h5 class="card-title">FUNCIONAL</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
            content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card text-uppercase">
        <img src="/../../assets/img/Affiliate_1fdd38b1-d99f-4d5a-b1ee-c4d30397dd2c_643x450.webp" class="card-img" alt="...">
        <div class="card-img-overlay">
          <h5 class="card-title">FUNCIONAL</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
            content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card text-uppercase">
        <img src="/../../assets/img/Affiliate_1fdd38b1-d99f-4d5a-b1ee-c4d30397dd2c_643x450.webp" class="card-img" alt="...">
        <div class="card-img-overlay">
          <h5 class="card-title">FUNCIONAL</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
            content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card text-uppercase text-bg-dark">
        <img src="/../../assets/img/Affiliate_1fdd38b1-d99f-4d5a-b1ee-c4d30397dd2c_643x450.webp" class="card-img" alt="...">
        <div class="card-img-overlay">
          <h5 class="card-title">FUNCIONAL</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
            content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
</div>

I tried with d-flex and flex-column in class="card-img-overlay" and mt-auto en class="btn" but don't work

Answer 1

You could add the following built-in classes into .card-img-overlay element:

d-flex flex-column align-items-start justify-content-end

Here the reference: https://getbootstrap.com/docs/5.3/utilities/flex/

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<div class="card text-uppercase text-bg-dark" style="width: 500px;">
  <img src="https://rb.gy/18mzdx" class="card-img" alt="...">
  <div class="card-img-overlay d-flex flex-column align-items-start justify-content-end">
    <h5 class="card-title">FUNCIONAL</h5>
    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
      content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>