Dynamically resize bootstrap cards title to align image

Question

As you can see, the title of the second card pushes the image down. How can i dynamically resize the card title in order to align all the image? Thank you.

Bootstrap Card

</head>
<body> 
 
<div class="container-fluid">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
  <div class="col">
    <div class="card bg-primary">  
      <div class="card-body text-center">
        <h4 class="card-title">John Doe</h4>
        <img class="card-img-top" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="Card image">        
        <p class="card-text">Some text inside the first card</p>
      </div>
    </div>
  </div>
  
  <div class="col">
    <div class="card bg-primary">
      <div class="card-body text-center">
        <h4 class="card-title">John Doe & other possible long text that pushes the image down  </h4>
        <img class="card-img-top" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="Card image">        
        <p class="card-text">Some text inside the second card</p>
      </div>
    </div>
  </div>
  
  <div class="col">
    <div class="card bg-primary">
      <div class="card-body text-center">
        <h4 class="card-title">John Doe </h4>
        <img class="card-img-top" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="Card image">        
        <p class="card-text">Some text inside the third card</p>
      </div>
    </div>
  </div> 
  
  </div>
</div>

</body>
</html>

JsFiddle code

score 0 · Answer 1 · answered Apr 11 '21 at 03:37

0

You can try adding something like style="height: 4vw;" to the h4 title card, to push all the image down of the same quantity, so the image starts all at the same level.

answered Apr 11 '21 at 03:37

sclero

173
1
1
8

score 0 · Answer 2 · answered Apr 11 '21 at 04:05

If the long text at the top of your card is going to vary too much, making it difficult to set one height for every situation, you could use JavaScript to set the height when the page is first load and use a listener for when the page changes size.

const titleList = document.querySelectorAll(".title-section");

function sizeTitleSections () {
    let tallest = 0;
    titleList.forEach(element => {
        element.style.height = null;
    });
    titleList.forEach(element => {
        let thisHeight = element.clientHeight;
        if (thisHeight > tallest) {
            tallest = thisHeight;
        }
    });

    titleList.forEach(element => {
        element.style.height = tallest + "px";
    })
}

sizeTitleSections();

window.addEventListener('resize', sizeTitleSections);

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>

<div class="container-fluid my-5">
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
        <div class="col mb-3">
            <div class="card h-100 bg-primary">
                <div class="card-body text-center">
                    <h4 class="card-title title-section">John Doe</h4>
                    <img class="card-img-top" src="https://via.placeholder.com/500" alt="Card image">
                    <p class="card-text">Some text inside the first card</p>
                </div>
            </div>
        </div>

        <div class="col mb-3">
            <div class="card h-100 bg-primary">
                <div class="card-body text-center">
                    <h4 class="card-title title-section">John Doe & other possible long text that push the image down </h4>
                    <img class="card-img-top" src="https://via.placeholder.com/500" alt="Card image">
                    <p class="card-text">Some text inside the second card</p>
                </div>
            </div>
        </div>

        <div class="col mb-3">
            <div class="card h-100 bg-primary">
                <div class="card-body text-center">
                    <h4 class="card-title title-section">John Doe </h4>
                    <img class="card-img-top" src="https://via.placeholder.com/500" alt="Card image">
                    <p class="card-text">Some text inside the third card</p>
                </div>
            </div>
        </div>

    </div>

I used images from placeholder.com as the images from w3schools.com were taking a while to load sometimes.

Dynamically resize bootstrap cards title to align image

2 Answers2