Adjust the height of the card body to match the horizontal bootstrap 5 card image

Is there a way to use Bootstrap 5.1.3 to make the image fill the height of the card's body and footer, while also ensuring the card-footer is placed at the bottom of the card?

The desired outcome:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3c1ccccd7d0d7d1c2d3e3968d928d90">[email protected]</a>/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>

htmlcssbootstrap-5

Answer №1

I usually steer clear of using absolute positioning, but in this case it proves effective above the mobile breakpoint. Implement a few additional classes (including on the parent element) and establish 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>

Answer №2

<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>

Answer №3

you inquired about adjusting the height of the cards' image to match the card body, but I believe that the content should dictate the image height.

In order to replicate the desired outcome from your screenshot, I have included

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

within the card-body to decrease the footer height. Now, it will occupy the full height of the parent element. Please verify if this resolves your issue. If there is anything else you need assistance with, feel free to inform me.

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Scalable Vector Graphics Form Field

I'm looking to enable user input in one of my SVG text fields when they click on it. Any ideas on how to achieve this? const wrapper = document.getElementById('wrapper'); const text = document.getEl ...

javascripthtmlcsssvg

Issues with the Dropdown Menu

I'm currently working on a dropdown menu and I've encountered two issues. When I hover over the links in the main navigation bar (such as 'about' and 'connect'), only the actual words are clickable, not the entire area tha ...

htmlcssdrop-down-menu

Selenium alert: element click blocked: Another element is in the way of receiving the click

I'm currently using Selenium in an attempt to click on the "show more" option under the "about this show" section on the following URL: https://www.bandsintown.com/e/1024477910-hot-8-brass-band-at-the-howlin'-wolf?came_from=253&utm_medium=we ...

pythonhtmlseleniumgoogle-chromeselenium-chromedriver

Adding Logging Features in ASP.NET

I am currently working with an .ascx file that contains both JavaScript and div elements. I need to add a log statement inside a function for troubleshooting purposes. Can someone please guide me on how to achieve this? Below is a snippet of my code: fu ...

javascripthtmlasp.netloggingascx

How can I make a Bootstrap 4 modal autoplay an iframe on page load?

My website features a full-screen background video that plays upon loading, and I want the same video to play when a user clicks the play button to open a modal. However, my issue is that the modal video (iframe) starts playing in the background as soon ...

jqueryhtmlcsstwitter-bootstrap

Setting up global color variables for React with Material UI theming is essential for ensuring consistent and

Is there a way to customize the default material-ui theme using global CSS? Additionally, how can we incorporate HEX values for colors when setting primary and secondary colors in the theme? In my App.js root file, I have defined a custom theme and want t ...

cssreactjsmaterial-ui

Error: The locator I used with the ID getUserById did not find any elements

Here is the code snippet from my HTML file: <h1>User list</h1> <button class="btn btn-primary" [routerLink]="'/register'">Register</button> <br> <br> <table class="table& ...

javascripthtmlangularprotractor

CSS files are failing to load in ASP .NET framework

I am facing a similar issue to the one described by another user on Stack Overflow here: Asp.NET not applying my CSS files However, after adding the following code to my web.config file, nothing seems to change: <location path="css"> &l ...

cssasp.net

Creating a jQuery alertbox that is triggered by specific elements in an anchor tag

I am working on an HTML page that contains 50 A tags. I am trying to figure out how to create an alert based on a specific element inside the A tag. Here is an example of what I am looking for: <a href "something">click to see the alert</a> ...

jqueryhtml

Customize checkbox and label using jQuery

I have a scenario where I have multiple checkboxes and corresponding labels. When the answer is correct, I want to change the background color of the selected checkbox and label. <input type="checkbox" id="a" class="check-with-label" /> <label fo ...

javascriptjquerycssajax

Managing the ajax response to showcase a button within datatables

Here is my current datatable structure: <table id="list" class="display" width="100%" > <thead> <tr> <th>Title</th> <th>Description</th> <th>delete</th> ...

javascripthtmlajaxdatatable

Designing a unique pagination layout for your WordPress website

Currently, I am working on a WordPress project. I have created my own template using CSS and HTML format. The implementation is going well, but I am facing difficulty integrating WP pagination design into my template. Below is the pagination code from my ...

phphtmlcsswordpress

Implementing a hybrid design using the display flex property

Any suggestions on the most effective way to achieve the following layout using flexbox? I want 2 rows with columns of equal width, but the last column should be 100% height and fill the remaining space in the section. Should I consider using multiple row ...

htmlcssflexboxcss-grid

What causes the discrepancy in pixel size between these two web pages on the same device?

I am currently putting together a portfolio showcasing the projects I have worked on while learning to code. Each project page has a banner at the top, but I'm encountering an issue with one site (Jubilee Austen page) that is unresponsive. After usin ...

htmlcssresponsive-designpixel

MANDATORY activation of CONFIRMATION

Hello everyone, I'm seeking assistance with my code. Below is the form code I need help with: <form action="input.php" method="POST"> <input type="text" class="input" name="firstname" placeholder="First Name" required> <input t ...

javascripthtmlcssformsvalidation

What is preventing me from setting a background image in Angular 13?

Trying a different approach based on advice from Stack Overflow, I attempted the following: <div [style.background-image]="'url(https://picsum.photos/200)'"></div> Unfortunately, this resulted in no effect and the image was ...

htmlcssangularimage

Center a specific item by aligning it with flex

I'm struggling to achieve a simple layout using flexbox, and I can't figure out how to do it. My objective is to have 3 divs aligned in a row, with the middle div (containing "short") centered. A visual representation would make it clearer: The ...

cssflexbox

Looking to access the layout details of an HTML element similar to what can be done in Firefox's debugger tool?

I am facing a challenge with a aspx.net grid control where I need to extract the first row's information and copy it into another table using JavaScript. To achieve this, I am attempting to calculate the width of each cell in the first row by accessin ...

javascripthtmlcssasp.net

Enhance your JQuery skills by implementing variables within the .css() function

Attempting to randomly assign values to an image's left and right properties using JQuery. Here is the code snippet: var sides = ["left", "right"] var currentSide = sides[Math.floor(Math.random() * sides.length)]; $("#"+currentImage).css({currentSide ...

javascriptjquerycss

Can CSS achieve Turing completeness?

As far as my understanding goes, CSS is not considered Turing complete. However, I admit that my knowledge of CSS is quite limited. Can CSS be classified as Turing complete? ...

cssturing-complete