Bootstrap 5 aligning text at bottom of the card not working-CodePudding

I'm currently working on a project where 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 te 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 >
  <div >
    <div >
      <img src="https://via.placeholder.com/800" >
    </div>
    <div >
      <div >
        <span >463</span>
        <h6 >How a responsive website can boost user satisfaction</h6>
        <div >
          <a href="#" >Read more -></a>
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

  <div >
    <div >
      <div >
        <img
          src="https://via.placeholder.com/800"
          
        />
      </div>
      <div >
        <div
          
        >
          <div> <!-- Grouping title and text by this div -->
            <div >463</div>
            <div>
              <h6 >
                How a responsive website can boost user satisfaction
              </h6>
            </div>
          </div>
          <div>
            <a href="#" >Read more -></a>
          </div>
        </div>
      </div>
    </div>
  </div>

Let's try this approach. Grouping the tile and text to one div to let the flex container has only 2 children 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).

CodePudding user response：

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:

<div >
  <div >
    <div >
      <img
        src="https://via.placeholder.com/800"
        
      />
    </div>
    <div >
      <!-- Add class names of `d-flex` and `flex-column` -->
      <div >
        <span >463</span>
        <h6 >
          How a responsive website can boost user satisfaction
        </h6>
        <!-- Add `mt-auto` -->
        <div >
          <a href="#" >Read more -></a>
        </div>
      </div>
    </div>
  </div>
</div>