Make horizontal bootstrap 5 cards image height of the card body-CodePudding

Using Bootstrap 5.1.3, how do I get the image to be the height of the card's body & footer ? Fixing this should also put the card-footer at the bottom of the card.

Result I'm trying to achieve:

Result I'm trying to achieve

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div >
  <div >
    <div >
      <div >
        <img src="https://via.placeholder.com/150"  alt="..."
      style="object-fit: cover;">
      </div>
      <div >
        <div >
          <h5 >
            <a  href="#" target="_blank">Card
          Title</a>
          </h5>
          <p >Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
          <span >Tag1</span>
        </div>
        <div >
          Last updated today.
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

I tend to avoid absolute positioning, but it works here above the mobile breakpoint. Add a few classes to do that (including on the parent element), and create a class for responsive image styles.

.fit-cover {
  object-fit: cover;
}

@media (min-width: 768px) {
  .fit-cover {
    position: absolute;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0-beta1/css/bootstrap.min.css">
<div >
  <div >
    <div >
      <div >
        <img src="https://via.placeholder.com/600"  alt="...">
      </div>

      <div >
        <div >
          <h5 >
            <a  href="#" target="_blank">Card
          Title</a>
          </h5>

          <p >Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
          <span >Tag1</span>
        </div>

        <div >
          Last updated today.
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

you asked to make > cards image height of the card body. but according to me the content should follow the height of image.

To achieve the result as in your screen shot I have added

style="height: calc(100% - 41px);"

to card-body reducing the footer height. it will now take full height of parent element. check if this solves your problem If there anything else let me know

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div >
  <div >
    <div >
      <div >
        <img src="https://via.placeholder.com/150"  alt="..."
      style="object-fit: cover;">
      </div>
      <div >
        <div  style="height: calc(100% - 41px);">
          <h5 >
            <a  href="#" target="_blank">Card
          Title</a>
          </h5>
          <p >Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
          <span >Tag1</span>
        </div>
        <div >
          Last updated today.
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">


<div >
  <div  style="flex-direction: row;">
    <div >
      <img src="https://img.freepik.com/free-psd/futuristic-glow-t…ect-psd-editable-template_53876-115831.jpg?w=2000"  alt="..." style="width: 240px;">
    </div>
    <div>
      <div >
        <h5 >Card title</h5>
        <p >This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <div >
          <small>Update 2min ago</small>
        </div>
      </div>
    </div>
  </div>
</div>