Matching the heights of div-containers within cards

Is there a way to ensure that the containers within my cards are all the same height? I'm not referring to the actual cards themselves, but rather the elements inside them.

This is what my code currently looks like:

.card-text {
  border: 1px solid lightgrey;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-eq-height">
  <div class="card-group">
    <div class="col-6">
      <div class="card">
        <div class="card-body">
          <div class="card-title"> bla bla </div>
          <div class="card-text"> bla<br><br>bla </div>
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="card">
        <div class="card-body">
          <div class="card-title"> bla bla </div>
          <div class="card-text"> bla bla </div>
        </div>
      </div>
    </div>
  </div>

Does anyone have a solution for ensuring that the card-text elements are of equal height?

javascripthtmlcssbootstrap-4

Answer №1

.card-text {
  border: 1px solid lightgrey;
}

.card {
  height: 100%
}

.card-body {
  display: flex;
  flex-flow: column; 
}

.card-text {
  flex-grow: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-eq-height">
  <div class="card-group">
    <div class="col-6">
      <div class="card">
        <div class="card-body">
          <div class="card-title"> example text </div>
          <div class="card-text "> sample text<br><br>text </div>
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="card">
        <div class="card-body ">
          <div class="card-title"> some text </div>
          <div class="card-text "> different text </div>
        </div>
      </div>
    </div>
  </div>

Answer №2

To achieve this layout, you can utilize flexbox along with the align-items property. Here is an example:

.card-group {
  display: flex;
  align-items: stretch;
}
.card {
  height: 100%;
  border: 1px solid black
}

Check out this link for a live demo: https://codepen.io/moisesnandres/pen/dqVzGE

Answer №3

Have you ever considered using .card-deck in place of .card-group? For example, check out: http://getbootstrap.com/docs/4.1/components/card/#card-decks It's specifically designed for displaying multiple cards with uniform height, and it seamlessly integrates with the surrounding .row element.

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

Exploring the different routing options for Nuxt.js: Dynamic versus Basic Routing

Can anyone suggest the best way to set up routing in Next.js for only Home, Gallery, and Contact us? Should I use dynamic routing or just keep it basic? Any ideas on how to path them? I'm still learning, so I would appreciate some guidance. I've ...

javascriptvue.jsroutesvuejs2nuxt.js

AngularJS triggers after the completion of Ajax requests

How can I implement AJAX within Angular AJAX? In my Angular setup, it looks like this: Index.html MyApp.controller('MainController', function($scope, $http, $location , $compile) { $scope.content_middle = 'Welcome'; ...

javascriptjqueryajaxangularjs

Retrieving an assortment of objects from a database and showcasing them using React

Attempting to retrieve an array of objects led me to this issue. Please excuse the messy code, I am still learning. export class App extends Component { state ={ character:[] } componentDidMount(){ fetch('https://swapi.dev/api/people/ ...

javascriptreactjsfetch

Counting JSON data items in Ionic2 can be achieved by iterating through the object

Encountering a new issue, I need to tally @NAME in order to populate array FACET[] and display @KEY Myjson " RESULT":{ "FACET":[ { "@NAME" : "creator", "@COUNT" : "20", "FACET_VALUES ...

htmljsontypescriptionic-frameworkionic2

Trouble with hiding elements using Ajax when dynamically assigned ids

Currently, I am working on incorporating jQuery into my project to enable/disable functionality using Ajax. The function is working fine, but the result is only displayed after a page refresh. The dynamic condition for the Ajax response is not functioning ...

javascriptphpjqueryajax

The FedEx API Rate Quote is currently unavailable and returns a 404 error message stating: "The requested resource is no longer accessible."

I am encountering issues while attempting to integrate the FedEx API into my Node.js application to obtain shipping rate quotes. Despite closely following the provided documentation, I consistently encounter a 404 error accompanied by the message: " ...

javascriptnode.jsjsonfedex

What is the best way to manage data in a single-page application and retrieve it after the page has been refreshed?

Lately, I’ve encountered an issue with data storage in a single-page application. I’m seeking some guidance on how to effectively store data and retain it after refreshing the page within a Single Page Application. As an example, let's say I hav ...

javascriptlocal-storagesingle-page-applicationvue.js

Is it possible for me to generate values using PHP that can be easily read by JavaScript?

I'm currently building a website and I am facing some challenges when trying to incorporate JavaScript for real-time calculations. Here are my issues: Is there a more efficient way to avoid manually typing out the code for each level up to 90, lik ...

phpjavascripthtml

Change array association with object extension

I am looking to transform the assignment below into one that utilizes object spread: bData.steps[bStepKey].params= cData[cKey] My attempt so far has been unsuccessful. bData= {...bData, steps:{ ...bData.steps[bStepKey], params: cData[cKey]}} ...

javascripttypescriptecmascript-6

The concept of transparency in Internet Explorer 8 stands out in

Has anyone been able to achieve transparency in IE8 for the foreground color, not just the background color? I've tried various solutions but they all seem to focus on the background color. I need the transparency effect for user-generated colors, so ...

javascripthtmlcssinternet-explorer-8opacity

How can I retrieve the data returned by an ajax call using jQuery?

I have a function that is making an AJAX call to return data. Here is the code: function reqNodelistByField( i ) { $.ajax({ type: 'post', url: './req.nodelist.by.field.php', dataType: 'text', ...

javascriptjqueryajaxfunctionreturn

Utilizing mutation observers for monitoring dynamic changes in fetch request outcomes

I'm currently developing a specialized interface that showcases the cumulative ticket count (an integer representing the total) sourced from a 3rd party API. My goal is to trigger a notification whenever this count increases. I've come across inf ...

javascriptvue.jsmutation-observers

Developing desktop applications with Angular 2 using NWjs

Looking to create an Angular 2 Desktop App using NWjs. Where can I find the entry point? Could someone provide some examples of developing Angular 2 Desktop Apps with NW.js? ...

javascriptangularnwjs

javascript get the current date and year

Examining the javascript code below: <script type="text/javascript"> $(function () { var currentDateTime = new Date(); var oneYear = new Date(); oneYear.setYear(oneYear.getYear() + 1); alert(currentDateTime + "_" ...

javascriptdatetimedate

Validation of decimal numbers in JavaScript without the presence of any other characters

Looking to create a JavaScript regex to validate an 8-digit number that may include decimals. The current regex /^\d+$/ allows for any other characters such as ( , * $ etc. How can I modify this to only accept numbers and periods? For example, the nu ...

javascriptnode.jsangularreactjstypescript

When working with Node.js and Express, I encountered an issue where the req.session object was not defined within

It's peculiar to me that req.session.username is undefined in the tag >>>DOESNT WORK<<< while it works in the tag >>>THIS DOES WORK<<<. I passed req as an argument to my module, but it seems like there might be some ...

javascriptnode.jsexpressexpress-session

Modify the material of all other models to match the material of the selected model

I've been tinkering with the vertex shader for 3D models, but I'm running into an issue where I can't seem to change all other models' materials to match the selected model's material. Each viewport contains 4 models, and when I se ...

javascriptthree.js

The JSONP error code 414 states that the Request-URI is too large

My attempt to transmit a large amount of data (~50000 bytes) to another server using JSONP is resulting in a 414 (Request-URI Too Large) response because JSONP only allows GET requests. Splitting the data into 2k chunks significantly slows down the entire ...

javascriptjsonjsonp

Tips for dynamically updating input values for every item in a foreach loop

I am looking to dynamically adjust the coordinates for each map element within a loop. For instance, I aim to assign coordinates[0] to the first map element and so forth. function initializeMap() { var coordinates = [ { "lat": 123 ...

javascriptjqueryarraysgoogle-mapsforeach

Rearranging an array using JavaScript

Looking to rearrange an array in a specific order: Starting with the initial array: const weekDaysArray = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']; containing the days of the week in ...

javascriptarrays