bootstrap columns have the same height

Question

This might be simple, but I don't know how to fix it.

I use Bootstrap5.

The complete code is here: https://www.codeply.com/p/BywuhLNUXy

It seems that codeply has some problems... So I put it on jsfiddle as well

https://jsfiddle.net/paul_z/y7a6dnkf/1/

Mainly the contact directory page. The code structure is

<div class="container">
<div class="row gy-5">

    <div class="col-lg-6">
        <div class="card m-b-30">
            <div class="card-body py-5">
                <div class="row">
                    <div class="col-lg-4 text-center">            
                    <img src="/static/logo.png" alt="logo" >            
                    </div>
                <div class="col-lg-8">
                    <h5 class="card-text mb-0"><i class="fa-solid fa-person"></i> user 1</h5>
                    <p class="card-text">CDD IT Informatique</p>
                    <hr class="dropdown-divider">                
                    <p class="card-text"><i class="fa-sharp fa-solid fa-building"></i> ###</p>        
                    <p class="card-text"><i class="fa-solid fa-envelope"></i> mail</p>        
                    <p class="card-text"><i class="fa-solid fa-phone"></i> phone</p>
               </div>
                </div>
              </div>
        </div>
    </div>
    
    ...

On the big screen, it displays two cards in columns.

The problem is that the cards sometimes have different heights. For example, for user 2, his role changes to: "Enseignant Chercheur Astrophysicalque Hautes Energies" instead of "CDD IT Informatique", so this line requires two lines instead of one. So user 2's card has a different height than the other cards.

How can I solve it? I don't know the size of the card, so I can't fix it implicitly (which is probably not a good idea anyway).

P.S.: I would have the same problem if the logos were different sizes. Some logos change the height of the card despite using img-fluid, widht, max-widht, max-height, etc. But I think first I have to solve the simple height problem.

Answer 1

Code snippet



.card {
  height: 100%;
}




This will set the height of all cards to 100% of their parent container. This will ensure that all cards have the same height, regardless of the content inside them.

To fix the problem of the logos having different sizes, you can use the following CSS:



Code snippet
.card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}




This will set the maximum width and height of the logos to 100%. This will ensure that the logos are never larger than their parent container. The object-fit: cover property will ensure that the logos are scaled to fill their container, without distorting their aspect ratio.

I hope this helps

Answer 2

col elements already have the same height - Bootstrap v5's Flexbox-based grid implementation already does this.

All you need to do is make the card occupy 100% of the height of its parent:

.card { height: 100%; }