Sizing issue in bootstrap cards

Question

Issue:

My layout as follows when the text comes with 1 line it will go up and I need to fix in the same position. How do we do it?

Answer 1

A simple solution is to create a function and find max height of text. You will also need to create a window resize listener and call the function to adjust the height.

$(function() {

  let adjustElementHeight = () => {

      // Fix the initial of the resize
      Array.from($(".js__selector")).forEach((x) => {
            x.style.height = 'initial';
      });

      // Store height inside array
      const titleHeights = Array.from($(".js__selector"))
        .map(x => x.getBoundingClientRect().height);

    // Find the bigest
      const maxHeight = titleHeights.reduce((prev, curr) => {
        return curr > prev ? curr : prev;
      }, 0);


    // Adjust the size 
   Array.from($(".js__selector"))
            .forEach((x) => x.style.height = `${maxHeight}px`);
  }
   // call the function on load
  adjustElementHeight();
  
  // Listen the reize 
    $(window).resize(() => {
     adjustElementHeight();
   });

});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container mt-5">
  <div class="row">
    <div class="col">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title js__selector">Card title Bigest than the right one</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
    </div>
     <div class="col">
     <div class="card">
      <div class="card-body">
        <h5 class="card-title js__selector">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
    </div>
    </div>
  </div>
  

Answer 2

I am assuming that you have your text in any dive. So let say you have like this

<div class="milageDiv">{{data.milage}}</div>

So in your css add this property white-space: nowrap;

.milageDiv {
    white-space: nowrap;
}