Question 45564 in CSS Question posted in
Some basic documentation can be found here.

How can I align text at bottom of the card? – CSS

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/[email protected]/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>
Tags:

2

Answers


  1. 0

    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/[email protected]/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>
    Login or Signup to reply.
  2. 0

    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/[email protected]/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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search