Bootstrap 5 card text and button aligment

Question

I am following this BootStrap 5 Crash Course: https://www.youtube.com/watch?v=4sosXZsdy-s. This end-result website is: https://www.frontendbootcampdemo.com

In it, there's a part where Cards are used. The problem I am seeing is that if the text length differs, the cards do not align properly. Here is the HTML for that:

   <section class="p-5">
  <div class="container">
    <div class="row text-center g-4">
      <div class="col-md">
        <div class="card bg-dark text-light">
          <div class="card-body text-center">
            <div class="h1 mb-3">
              <i class="bi bi-laptop"></i>
            </div>
            <h3 class="card-title mb-3">Virtual</h3>
            <p class="card-text">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit.
              Iure, quas quidem possimus dolorum esse eligendi?
            </p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
      </div>
      <div class="col-md">
        <div class="card bg-secondary text-light">
          <div class="card-body text-center">
            <div class="h1 mb-3">
              <i class="bi bi-person-square"></i>
            </div>
            <h3 class="card-title mb-3">Hybrid</h3>
            <p class="card-text">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit.
              Iure, quas quidem possimus dolorum esse eligendi?
            </p>
            <a href="#" class="btn btn-dark">Read More</a>
          </div>
        </div>
      </div>
      <div class="col-md">
        <div class="card bg-dark text-light">
          <div class="card-body text-center">
            <div class="h1 mb-3">
              <i class="bi bi-people"></i>
            </div>
            <h3 class="card-title mb-3">In Person</h3>
            <p class="card-text">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit.
              Iure, quas quidem possimus dolorum esse eligendi?
            </p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

I have tried adding h-100 to the card-body. The problem is that, while all the cards keep the same height, the buttons are not aligned at the bottom.

How do I keep the cards at the same height and keep the buttons aligned at the bottom?

Thank you!

Answer 1

You can play around with flex CSS. Let me demo to you by using back your code.

1. add .h-100 to .card
2. add .d-md-flex and .flex-column to .card-body
3. add .flex-grow-1 to .card-text

Voila~ My method is just demonstratte one of the method to achieve what you want but still it is depends on what you want the layout to become in different screen sizing at the end.

You can refer this page for full capability of flexbox for Bootstrap 5.

Hope it helps.

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

<section class="p-5">
  <div class="container">
    <div class="row text-center g-4">
      
      <div class="col-md">
        <div class="card bg-dark text-light h-100">
          <div class="card-body text-center d-md-flex flex-column">
            <div class="h1 mb-3">
              <i class="bi bi-laptop"></i>
            </div>
            <h3 class="card-title mb-3">Virtual</h3>
            <p class="card-text flex-grow-1">
              Lorem, ipsum dolor sit amet consectetur.
            </p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
      </div>
      
      <div class="col-md">
        <div class="card bg-secondary text-light h-100">
          <div class="card-body text-center d-md-flex flex-column">
            <div class="h1 mb-3">
              <i class="bi bi-person-square"></i>
            </div>
            <h3 class="card-title mb-3">Hybrid</h3>
            <p class="card-text flex-grow-1">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            </p>
            <a href="#" class="btn btn-dark">Read More</a>
          </div>
        </div>
      </div>
      
      <div class="col-md">
        <div class="card bg-dark text-light h-100">
          <div class="card-body text-center d-md-flex flex-column">
            <div class="h1 mb-3">
              <i class="bi bi-people"></i>
            </div>
            <h3 class="card-title mb-3">In Person</h3>
            <p class="card-text flex-grow-1">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit.
              Iure, quas quidem possimus dolorum esse eligendi?
            </p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</section>