Make horizontal bootstrap 5 cards image height of the card body

user_18967014 0
Viewed 685

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/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<div class="container">
  <div class="card">
    <div class="row g-0">
      <div class="col-sm-4">
        <img src="https://via.placeholder.com/150" class="h-100 card-img" alt="..."
      style="object-fit: cover;">
      </div>
      <div class="col-sm-8">
        <div class="card-body">
          <h5 class="card-title">
            <a class="link-dark text-decoration-none" href="#" target="_blank">Card
          Title</a>
          </h5>
          <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
          <span class="badge rounded-pill bg-dark">Tag1</span>
        </div>
        <div class="card-footer text-end text-muted">
          Last updated today.
        </div>
      </div>
    </div>
  </div>
</div>

bootstrap-5 css html
3 Answers

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 class="container">
  <div class="card">
    <div class="row g-0">
      <div class="col-sm-4 position-relative">
        <img src="https://via.placeholder.com/600" class="card-img fit-cover w-100 h-100" alt="...">
      </div>

      <div class="col-sm-8">
        <div class="card-body">
          <h5 class="card-title">
            <a class="link-dark text-decoration-none" href="#" target="_blank">Card
          Title</a>
          </h5>

          <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
          <span class="badge rounded-pill bg-dark">Tag1</span>
        </div>

        <div class="card-footer text-end text-muted">
          Last updated today.
        </div>
      </div>
    </div>
  </div>
</div>

user_12648040

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 class="container">
  <div class="card">
    <div class="row g-0">
      <div class="col-sm-4">
        <img src="https://via.placeholder.com/150" class="h-100 card-img" alt="..."
      style="object-fit: cover;">
      </div>
      <div class="col-sm-8">
        <div class="card-body" style="height: calc(100% - 41px);">
          <h5 class="card-title">
            <a class="link-dark text-decoration-none" href="#" target="_blank">Card
          Title</a>
          </h5>
          <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
          <span class="badge rounded-pill text-bg-secondary">Tag1</span>
        </div>
        <div class="card-footer text-end text-muted">
          Last updated today.
        </div>
      </div>
    </div>
  </div>
</div>

user_86894480 

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


<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col card" style="flex-direction: row;">
    <div class=" h-100">
      <img src="https://img.freepik.com/free-psd/futuristic-glow-t…ect-psd-editable-template_53876-115831.jpg?w=2000" class="card-img-top" alt="..." style="width: 240px;">
    </div>
    <div>
      <div class="card-body px-2 py-2 p-0">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">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 class="border-top">
          <small>Update 2min ago</small>
        </div>
      </div>
    </div>
  </div>
</div>

user_191421230
Related