Adjust the height of each card dynamically based on the tallest card in the row

I am working on a row that looks like this:

<div class="row">
    <div class="col">
        <div class="card">
            <div class="card-body">
                <h3 class="card-title">Title 1</h3>
                <p class="card-text">5 Line Text</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <div class="card-body">
                <h3 class="card-title">Title 2</h3>
                <p class="card-text">3 Line Text</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <div class="card-body">
                <h3 class="card-title">Title 3</h3>
                <p class="card-text">4 Line Text</p>
            </div>
        </div>
    </div>
</div>

Currently, the cards have different heights (5 lines, 3 lines, and 4 lines) which doesn't look very nice...

I would like all these cards to have the same height, matching the tallest one (in this case, 5 lines).

javascriptcssbootstrap-4

Answer №1

There are two ways to address this issue.

To first method is to apply the h-100 utility class to the card containers (.card):

By using the h-100 utility class, the cards will take on the height of the columns. Since all the columns in a row have the same height, the cards will also be uniform in height.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="row">
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h3 class="card-title">Title 1</h3>
        <p class="card-text">
          5 Line Text<br>
          5 Line Text<br>
          5 Line Text<br>
          5 Line Text<br>
          5 Line Text
        </p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h3 class="card-title">Title 2</h3>
        <p class="card-text">
          3 Line Text<br>
          3 Line Text<br>
          3 Line Text
        </p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h3 class="card-title">Title 3</h3>
        <p class="card-text">
          4 Line Text<br>
          4 Line Text<br>
          4 Line Text<br>
          4 Line Text
        </p>
      </div>
    </div>
  </div>
</div>

The second option is to utilize card decks to ensure all cards have the same height:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="row">
  <div class="col">
    <div class="card-deck">
      <div class="card">
        <div class="card-body">
          <h3 class="card-title">Title 1</h3>
          <p class="card-text">
            5 Line Text<br>
            5 Line Text<br>
            5 Line Text<br>
            5 Line Text<br>
            5 Line Text
          </p>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <h3 class="card-title">Title 2</h3>
          <p class="card-text">
            3 Line Text<br>
            3 Line Text<br>
            3 Line Text
          </p>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <h3 class="card-title">Title 3</h3>
          <p class="card-text">
            4 Line Text<br>
            4 Line Text<br>
            4 Line Text<br>
            4 Line Text
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №2

If you're looking for a simple solution, the quickest way to address this problem is by utilizing the h-100 class.

Just include the h-100 class and apply it to your .card div in order to ensure that all cards have the same height as the tallest card in your HTML.

Check out the Live Working Demo:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="row">
    <div class="col">
        <div class="card h-100">
            <div class="card-body">
                <h3 class="card-title">Title 1</h3>
                <p class="card-text">5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card h-100">
            <div class="card-body">
                <h3 class="card-title">Title 2</h3>
                <p class="card-text">3 Line Text3 Line Text3 Line Text3 Line Text3 Line Text3 Line Text3 Line Text3 Line Text</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card h-100">
            <div class="card-body">
                <h3 class="card-title">Title 3</h3>
                <p class="card-text">4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text</p>
            </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

Designing divs that intersect

Struggling to replicate a design due to issues with the overlay section. I have separate divs for the menu bar, globe, and header text but positioning them as overlays is proving problematic. Attempted to use zIndex without success. https://i.sstatic.net/ ...

cssreactjsflexbox

Create and export a global function in your webpack configuration file (webpack.config.js) that can be accessed and utilized

Looking to dive into webpack for the first time. I am interested in exporting a global function, akin to how variables are exported using webpack.EnvironmentPlugin, in order to utilize it in typescript. Experimented with the code snippet below just to und ...

javascripttypescriptwebpack

Strategies for integrating user data into Vue components within Laravel

I've successfully logged my user data in the console, but when I try to display the data on Contalist page, nothing is returned. I'm new to using Vue and need help implementing it into my projects. Below are my PHP controller and Vue component fi ...

javascriptphplaravelvue.jseloquent

What is the best way to maximize vertical space in every element on a page?

How can I achieve a layout similar to the image shown? I want three distinct sections: a navigation bar fixed at the bottom, and left and right sides each taking up 50% of the screen. Additionally, all boxes on the left side should have equal height. I am ...

htmlcssreactjsbootstrap-5

Issue in Ionic 3 where ion-list does not scroll vertically on iOS devices when ion-items are dynamically generated using ngFor within the ion-list

When using Ionic v3 to develop a hybrid app, I encountered an issue where ion-items within an ion-list generated using *ngFor are not scrollable on iOS devices. Strangely, this problem does not occur on Android devices. Here is the HTML code snippet: < ...

ioscssionic-frameworkscrollionic3

Ways to format the direct descendant of a multi-level list?

Check out my nested ul list: <ul> <li> <a href="/"></a> </li> <li> <a href="/"> </a> &l ...

htmlcsssassscss-mixins

Improved method for managing hash URLs in AJAX-enabled websites

When dealing with pages that have a hash mark in the URL address bar, it can be inconvenient unless using HTML 5 and history.pushState() for AJAX loads. For example, when item1.html is loaded and then the user clicks to view item2.html, the URL changes to ...

javascriptajaxhtmlback-buttonhistory.js

When the CSS is rendered, it automatically appends a forward slash

I have successfully implemented CSS on the page. @font-face { font-family: "feather"; src:url("fonts/feather-webfont.eot"); src:url("fonts/feather-webfont.eot?#iefix") format("embedded-opentype"), url(&qu ...

css

Divide JSON information into distinct pieces utilizing JQuery

$.ajax({ type: 'POST', url: 'url', data: val, async: false, dataType: 'json', success: function (max) { console.log(max.origin); } ...

javascriptjqueryajaxjson

Looking for assistance with submitting a form?

Looking for assistance with a JavaScript hack. Since this morning, I've been trying to figure out a simple hack that would enable me to submit a form multiple times. Take a look at this image. It's a basic form. What I want is to be able to su ...

javascriptjquery

Three.js not rendering any objects, only displaying a blank black screen

I've encountered a similar issue with a few of my other three.js codes. I've set up the JavaScript within HTML, but the objects aren't appearing on the screen. Every time I run the file, it just shows a black screen. The file is supposed to ...

javascripthtmlthree.js

Encountering problems when transforming Next.js server components into client components

I've been working on a blog site using next.js. Initially, I had a home page that was a server component, but I wanted to convert it into a client component to add interactivity like pagination. However, after converting the code to a client componen ...

javascriptreactjsnext.js

Is there a smooth and effective method to implement a timeout restriction while loading a sluggish external file using JavaScript?

Incorporating content from an external PHP file on a different server using JavaScript can sometimes be problematic. There are instances where the other service may be slow to load or not load at all. Is there a method in JavaScript to attempt fetching th ...

javascripthtmlajaxtimeoutexternal

Adding custom script tags to a React application

I'm interested in integrating a StreamingVideoProvider video player into my React application but facing some challenges: I do not have direct access to the video URL I want to utilize their JS video player for its advanced features like password pro ...

javascriptreactjs

Stop an item from being included based on a boolean value

I need to iterate through an array of IDs called "world". The idea is that if the ID value in world exists in myArray[n].id, then I want to remove the entire element from myArray. If it doesn't exist, then I want to add it to myArray. world = ["124241 ...

javascriptbooleanpush

JavaScript - Verify if all properties belonging to an object are set to true

I'm facing a challenge with an object that contains various fields which could potentially be set to true for a user, similar to a list of achievements. If I have an object like {one: true, two: false, three: true}, how can I prevent the function from ...

javascriptnode.jsobject

when the submit button is clicked, verify whether the input field is empty

I have exhausted all my options and nothing seems to work. All I want is for the following functionality to be implemented: When a submit button is clicked -> check if a text field is empty -> if it is, display an error alert and prevent advancing t ...

javascript

Store the incoming documents from xmpp using the Strophe si-filetransfer feature

I am currently working on adding file transfer functionality to my web application using the strophe.si-filetransfer.js plugin. I have successfully received file details within an iq stanza. My inquiry is, how can I extract the file data from this iq stanz ...

javascriptjqueryxmppstrophe

What is the best way to adapt a wavetable for compatibility with the `OscillatorNode.setPeriodicWave` function?

I am exploring the use of a custom waveform with a WebAudio OscillatorNode. While I have basic programming skills, I am struggling with the mathematical aspects of audio synthesis. Waveforms are essentially functions, which means I can sample them. Howeve ...

javascriptsignal-processingfftweb-audio-api

Assurance-driven number tally

I'm diving into JavaScript and recently started exploring promises. I've put together a code snippet that logs the value passed to the promise function as a parameter after the setTimeout function is triggered. Now, I'm wondering if there&ap ...

javascriptnode.jsasynchronouses6-promise