I have a Bootstrap 5 row with multiple col's. Each col has an image and a paragraph.

The images have different height, so in order to align everything I want to:

1. give the child div a 100% height with h-100
2. align the image with the top with align-top
3. align the paragraph with the bottom with align-bottom

<div >
  <div >
    <div >
      <div >
        <img  src="example1.png" width="180">
      </div>
      <div >
        <p>Paragraph 1</p>
      </div>
    </div>
  </div>
  <div >
    <div >
      <div >
        <img  src="example2.png" width="180">
      </div>
      <div >
        <p>Paragraph 2</p>
      </div>
    </div>
  </div>
</div>

But align-bottom somehow have no effect. Most likely align-top don't either, but haven't checked since the default is to align in the top.

What am I doing wrong?

CodePudding user response：

You have to use the following Bootstrap classes: flex-grow-1 d-flex justify-content-center align-items-end, where:

• flex-grow-1 forces the text to always fill the remaining empty space below the image,
• justify-content-center centers the text horizontally and
• align-items-end pushes the text vertically to the bottom.

Note: You can remove id="img-1 and id="img-2 (it's just for illustration purposes).

See the snippet below.

#img-1 {
  height: 200px !important;
}

#img-2 {
  height: 50px !important;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div >
  <div >
    <div >
      <div >
        <img id="img-1"  src="example1.png" width="180">
      </div>
      <div >
        <p>Paragraph 1</p>
      </div>
    </div>
  </div>
  <div >
    <div >
      <div >
        <img id="img-2"  src="example2.png" width="180">
      </div>
      <div >
        <p>Paragraph 2</p>
      </div>
    </div>
  </div>
</div>