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:

https://i.sstatic.net/Nau98.png

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:

https://i.sstatic.net/Tu4xJ.png

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:

https://i.sstatic.net/41Sf3.png

<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

Guide on customizing Bootstrap 4.5 SASS variables and incorporating them into SCSS files

Recently, I made the decision to transition all of my CSS files into SCSS in order to leverage Bootstrap 4.5 theming for styling purposes. Initially, I managed to get some aspects working correctly, but encountered issues after switching from CSS to SCSS a ...

bootstrap-4sassgulp-sass

How to Use Vue.js to Find the Nearest Div Element with a Specific

Below is the HTML code I am working with: <div id="app"> <div class="image"> <div class="overlay"> <p>Some overlay text</p> </div> <img src="https://placeimg.com/640/480/any" class="img-fluid"> ...

javascripthtmlcssvue.js

How can I center a Bootstrap modal vertically and make it responsive?

Is there a way to vertically center the bootstrap modal? I have been searching for a solution, but none seem to be responsive or effective. My website is using Bootstrap 3. The modal does not adjust properly on smaller screens or when the browser window i ...

javascriptjqueryhtmlcsstwitter-bootstrap

Angular provides a variety of functionality to control the behavior of elements in your application, including the

I have a page with Play, Pause, Resume, and Stop icons. When I click on the Play icon, the Pause and Stop icons are displayed. Similarly, I would like to show the Resume and Stop icons when I click on the Pause icon. I need help with this code. Thank you. ...

htmlangulartypescript

What is the best way to incorporate my Switch component into my Table component as a distinct column, while also maintaining separate states for each component?

My journey into learning React.js has been exciting so far. However, I am facing some confusion when it comes to stateful components. Currently, I am utilizing Bootstrap tables for creating a table and successfully fetching data using GET requests. Additio ...

javascriptreactjsreduxbootstrap-4material-ui

Using a CSS hack to create a border cutout

The Dilemma... I am attempting to position div elements over a border, while maintaining space on both sides of each div. Take a look at the scenario: Note the gaps surrounding the black divs. I am struggling to find a solution for this issue, aside fro ...

htmlcss

Creating a sleek full-page container with a navigation bar using TailwindCSS

I am currently utilizing Tailwind CSS and in need of creating a layout that consists of: A sticky navigation bar A full-page section with content centered Other sections with varying heights A footer Below is a simple representation: +------------------- ...

htmlcssfrontendtailwind-css

In the latest version of Bootstrap, the carousel has been redesigned to smoothly transition across the entire page, providing a

I am currently in the process of learning Bootstrap 5 and decided to create a simple carousel by referring to the official documentation on Bootstrap 5 Carousel. Following their instructions, I copied their code and integrated it into my template. Howeve ...

htmlcsscarouselbootstrap-5

Utilizing NSURL to insert HTML credentials into the <input> tag

Trying to send a request from my iOS app to the Mistar website through NSURLSession. The goal is to load the website in the background, provide username and password strings into the input fields, and gain access to the logged-in page. This is the relevan ...

htmlioshttpnsurlnsurlsession

Drawing the canvas is taking place prior to the image being fully loaded in JavaScript

Currently, I am in the process of creating a collage using images that are all sized at 174x174 pixels. The images are stored on my server, and while my program can locate them successfully, it requires me to click the "save image" button twice for them to ...

javascripthtml

Remove elements from an array based on the indices provided in a separate array

1) Define the array a = [a,b,c,d,e,f,g,h,i,j]; using JavaScript. 2) Input an array 'b' containing 5 numbers using html tags. This will be referred to as the 'b' array. 3) Insert elements into array 'b' ensuring they are alwa ...

javascripthtmlarrayssplice

Change the color of the image to black and white and then back to its original state when a specific element is hovered over

Searching for a jQuery plugin to convert an image to black and white? Look no further! I've explored various options, but none quite fit the bill. What I'm really after is an effect that will revert the image back to color when a specific element ...

jquerycssimage

What could be causing the issue with my form validation in jQuery?

Why are the fields yourTelephoneNumbers and yourEmailAddress not validating? I am trying to set up my form so that the user is required to enter either a phone number or an email address. Error Messages: Error: Bootstrap tooltips require Tether () bootst ...

jqueryjquery-validatetwitter-bootstrap-4bootstrap-4

Error: The variable "deleted1" is not declared and cannot be used on the HTML button element's onclick

Hello, I need assistance from someone. I encountered an error message after trying to delete a row even though I have declared the button already. Error: deleted1 is not defined at HTMLButtonElement.onclick Could it be due to the script type being modul ...

javascripthtmlfirebasegoogle-cloud-firestore

Error: The argument passed to int() must be a string, bytes-like object, or number, not 'NoneType' (Issue when sending HTML input to Python)

#!C:\Users\aan\AppData\Local\Programs\Python\Python39\python.exe import numpy as np import skfuzzy as fuzz import cgi from skfuzzy import control as ctrl print("Content-type:text/html\r\n\r\n ...

pythonhtml

Creating an arrow dialog box in Material UI: A step-by-step guide

I have successfully created an arrow box (div) using custom CSS and HTML. However, I am facing difficulty in implementing the same design in Material UI with React JS. The code below demonstrates how to achieve this using custom CSS. My question is: How ...

htmlcssreactjsmaterial-ui

Utilizing negative values in lineTo, strokeRect, and fillRect functions

Is it possible to input negative numbers into the drawing primitives of HTML5 canvas? For instance, if I apply a translation of (100,100), would I be able to draw a rectangle or line with coordinates (-25,-25)? Initial testing using lineTo seems inconclus ...

javascripthtmlcanvas

Building a theme with TypeScript in React

As I embark on my React project, I've been tasked with creating a CSS using TypeScript while referring to the color palette diagram provided below. Utilizing createMuiTheme to build the theme, I've realized that there are various possible conditi ...

cssreactjstypescript

How can I fix the issue of the dropdown button extending the height of the navigation bar when clicked on?

Currently, I am working with the Laravel framework and aiming to incorporate a Bootstrap dropdown within a navbar without affecting its height when clicked. Preview image: https://i.sstatic.net/r9uhH.png Despite going through the documentation for both B ...

laravelbootstrap-4dropdownnav

Comparing the impact of class and element selectors on CSS performance

Considering that CSS is read from right to left, I am pondering the balance between performance and readability when it comes to adding classes to HTML in order to more efficiently target elements in CSS. Additionally, I am curious about how using a gener ...

htmlcss