Making the Bootstrap 4 card-footer expand to occupy the remaining height of the column

I'm currently developing a project that incorporates bootstrap cards. There are 3 cards, each for a different column, and I need them to have equal heights. Here is how they currently look:

The B and C cards should occupy the remaining height of their respective columns. Adding the h-100 class achieves this, but results in the card-body filling the entire column height instead. Here's an example:

However, my goal is to have the card-footer fill the rest of the column height, not the card-body. It should appear as follows:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <div class="card-body lead text-center">
          <strong>A</strong>
        </div>
        <div class="card-footer text-muted">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod nisl sed commodo
            commodo. Donec nec lectus nec tortor feugiat accumsan id sit amet mauris. Nunc interdum
            ut arcu nec lobortis.
        </div>
      </div>
    </div>
    <div class="col-md-4">
     <div class="card">
        <div class="card-body lead text-center">
          <strong>B</strong>
        </div>
        <div class="card-footer text-muted">
          Lorem ipsum
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <div class="card-body lead text-center">
          <strong>C</strong>
        </div>
        <div class="card-footer text-muted">
          Lorem ipsum
        </div>
      </div>
    </div>
  </div>
</div>

htmlcssbootstrap-4

Answer №1

Adjusting the footer height and card height to h-100 works like a charm. Check out the snippet below and toggle to full page view for best results.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="card h-100">
        <div class="card-body lead text-center">
          <strong>A</strong>
        </div>
        <div class="card-footer text-muted h-100">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod nisl sed commodo commodo. Donec nec lectus nec tortor feugiat accumsan id sit amet mauris. Nunc interdum ut arcu nec lobortis.
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card h-100">
        <div class="card-body lead text-center">
          <strong>B</strong>
        </div>
        <div class="card-footer text-muted h-100">
          Lorem ipsum
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card h-100">
        <div class="card-body lead text-center">
          <strong>C</strong>
        </div>
        <div class="card-footer text-muted h-100">
          Lorem ipsum
        </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

How can you toggle the visibility of a div based on detecting a specific class while scrolling?

My webpage features a sticky header that gains an extra .header-scrolled class when users scroll down. I am looking to switch the logo displayed in the header once it has been scrolled. Below is a simplified version of my HTML code: <header class=".he ...

javascripthtmlcss

FullCalendar, showcasing real-time event creation as you select dates

I am currently utilizing fullcalendar 4 on my website and I am attempting to incorporate an indicator for when a user selects a date on the calendar. While the background color changes, it's not very visible. My aim is to replicate the functionality ...

javascripthtmljqueryfullcalendarfullcalendar-4

Display the names of files depending on the selection made in the drop-down menu

In order to utilize a value from a select box for a PHP function later on the page, I am seeking assistance. Within my index.php file, there is a standard select drop down containing folder names as values and options. After selecting a folder, I aim to e ...

javascriptphpjqueryhtmlajax

Form popup that closes without refreshing the page upon submission

My goal is to make this form close when the button is pressed without refreshing the page, as Ajax code will be added later. The form functions as a pop-up, so it needs to close once the button is clicked. Currently, I can click the button without a refres ...

jqueryhtmlajaxforms

Manipulate audio files by utilizing the web audio API and wavesurfer.js to cut and paste audio

I am currently working on developing a web-based editor that allows users to customize basic settings for their audio files. To achieve this, I have integrated wavesurfer.js as a plugin due to its efficient and cross-browser waveform solution. After prior ...

javascriptruby-on-railshtmlaudioweb-audio-api

HTML Date Form: Setting the Start Date to Tomorrow with JavaScript

Is there a way to restrict the start date to tomorrow's local date? I'm having trouble with the code below: <form method="POST"> <div> <label for="s2">pickup_date</label> ...

javascripthtmlformsdatelocaltime

Loading indicator for buttons

Issue with submit button onclick function (onClick="mandatoryNotes()"). It is taking a while to load, so a preloader script was added. The preloader is now working, but the function is not being called. Seeking assistance. Thank you. function mandatoryN ...

javascripthtml

Discovering the specific DOM element that has been clicked using only JavaScript

Looking to enhance my HTML document with interactivity, I wanted to achieve a feature where clicking on a div element would display its respective id. I attempted the following approach: window.onload = function() { associateIds(); clicked(); } fu ...

javascripthtmldom

Gathering information from a website by using BeautifulSoup in Python

When attempting to scrape data from a table using BeautifulSoup, the issue I'm running into is that the scraped data appears as one long string without any spaces or line breaks. How can this be resolved? The code I am currently using to extract text ...

pythonhtmlweb-scrapinghtml-parsingbeautifulsoup

The background color of the div or section is stubbornly refusing to change, no matter how much I tweak it

.forBackground { background-color: white; } .kontaktUndMapContainer { width: 100%; padding: 20px; color: gray; text-align: center; } .überschriftKontakt { margin-bottom: 20px; } .überschriftKontakt2 { margin-top: 20px; margin-bottom: 2 ...

htmlcssfrontendmobile-website

The ModalPopupExtender has the ability to automatically close

I implemented a ModalPopupExtender to display a panel with a textbox inside. I added some code for the textbox's textchanged event, but every time the focus leaves the textbox, the popup closes automatically. Can anyone suggest a solution to this prob ...

c#jqueryhtmlasp.netajax

Loads a PHP file automatically using the URL from a jQuery Ajax method

Using the jquery ajax method, I am trying to populate a dropdown menu with a set of option values from my title.php file. However, upon loading the page, in the Chrome Android browser, it redirects to the title.php. Does anyone have any insights into what ...

phpjqueryajaxhtmlforms

Using jQuery, prevent the user from entering text into an input box when a checkbox

In my project, there is a checkbox that determines whether an input box is disabled. The issue arises when I try to disable the input based on the database value. For example, when the value is 0, it should display as disabled false; however, the input rem ...

javascriptjqueryhtmlajax

AngularJS allows users to seamlessly retain any entered form data when redirected, enabling users to pick up right where they left off when returning to the form

I am currently working on a user data collection project that involves filling out multiple forms. Each form has its own dedicated HTML page for personal details, educational details, and more. After entering personal details and clicking next, the data ...

javascripthtmlangularjsforms

Why is my element still occupying space even though it has been hidden with a display of none?

Currently, I'm working on a dropdown navigation menu where one of the list items causes space issues when the display property is set to none. Specifically, the 'Book A Table' item isn't meant to be visible in the center div when the sc ...

javascripthtmlcssresponsive-design

"Internet Explorer text input detecting a keyboard event triggered by the user typing in a

It appears that the onkeyup event is not triggered in IE8/IE9 (uncertain about 10) when the enter button is pressed in an input box, if a button element is present on the page. <html> <head> <script> function onku(id, e) { var keyC = ...

javascripthtmlinternet-explorer

What is preventing me from using jQuery to dynamically insert HTML onto the page?

Below is the HTML code for a Bootstrap Modal dialog box: <div class="modal fade" id="rebateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Navigation menu with submenus containing buttons

I attempted to incorporate a dropdown into my existing navigation bar, but unfortunately, the dropdown content disappeared after adding the necessary code. I am now at a loss on how to troubleshoot this issue and make the dropdown function properly. Despit ...

javascripthtmljquerycssnav

Finding your site's First Contentful Paint (FCP) can be done by analyzing the

After doing some research on Google insights, I came across information about FCP. However, I'm still unsure about how to determine my site's FCP and other relevant metrics. If anyone could provide me with more information or share detailed link ...

javascripthtmlcss

Enhancing Canvas with a JPEG layer using the Caman library

I'm currently working with the Caman library to manipulate an image. My goal is to overlay a jpeg onto the manipulated image, but I'm facing a challenge. Although I can briefly see the jpeg beneath the manipulated image, it quickly gets overlai ...

htmlcanvashtml5-canvascamanjs