How can I align text at bottom of the card?

Question

I want to view multiple articles on a page. I used Bootstrap 5 cards to make it look great. Everything worked out fine as I wanted, but the only thing which bothers me is that the read more link is not at the bottom of the card. I tried adding a d-flex, and used align-bottom, but nothing put the text at the bottom

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="card p-2">
  <div class="row g-3">
    <div class="col-5">
      <img src="https://via.placeholder.com/800" class="card-img fit-cover w-100 h-100">
    </div>
    <div class="col-7">
      <div class="card-body h-100 p-0 m-0">
        <span class="card-text mb-1 small">463</span>
        <h6 class="card-title custom-text-truncate">How a responsive website can boost user satisfaction</h6>
        <div class="d-flex align-items-end">
          <a href="#" class="mb-0 small">Read more -></a>
        </div>
      </div>
    </div>
  </div>
</div>

When running your code I see the `Read more` is at the end of the page but not the very end. do you mean it should be at the very end (the bottom of the whole viewport) ? — thelonglqd, Feb 02 '23 at 02:18
@thelonglqd I want the read more link to be aligned at the bottom of the card. So the card text and title should stay above and the read more link at the bottom of the card — Berk, Feb 02 '23 at 02:21

score 1 · Answer 1 · edited Feb 02 '23 at 14:12

Group the tile and text to one div to let the flex container have only 2 child items and set the flex container flex-column and justify-content-between (it means one item at the top of the container and the other at the very bottom).

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="card">
  <div class="row g-3">
    <div class="col-5">
      <img src="https://via.placeholder.com/800" class="card-img fit-cover w-100 h-100" />
    </div>
    <div class="col-7">
      <div class="d-flex flex-column justify-content-between card-body h-100 p-0 m-0">
        <div>
          <!-- Grouping title and text by this div -->
          <div class="card-text mb-1 small">463</div>
          <div>
            <h6 class="card-title custom-text-truncate">
              How a responsive website can boost user satisfaction
            </h6>
          </div>
        </div>
        <div>
          <a href="#" class="mb-0 small">Read more -></a>
        </div>
      </div>
    </div>
  </div>
</div>

score 1 · Answer 2 · edited Feb 02 '23 at 14:13

You can achieve this by setting the .card-body to use a flex layout and change its direction to column and then finally add a margin-top: auto for the read more link. When utilizing Bootstrap's utility classes, the result would be as follow:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="card p-2">
  <div class="row g-3">
    <div class="col-5">
      <img src="https://via.placeholder.com/800" class="card-img fit-cover w-100 h-100" />
    </div>
    <div class="col-7">
      <!-- Add class names of `d-flex` and `flex-column` -->
      <div class="card-body h-100 p-0 m-0 d-flex flex-column">
        <span class="card-text mb-1 small">463</span>
        <h6 class="card-title custom-text-truncate">
          How a responsive website can boost user satisfaction
        </h6>
        <!-- Add `mt-auto` -->
        <div class="d-flex align-items-end mt-auto">
          <a href="#" class="mb-0 small">Read more -></a>
        </div>
      </div>
    </div>
  </div>
</div>

How can I align text at bottom of the card?

2 Answers2