It's probably simple, but I could not figure out how to fix it.
I use Bootstrap5.
The full code is here : https://www.codeply.com/p/BywuhLNUXy
Seems codeply has some problems... So I put it also on jsfiddle
https://jsfiddle.net/paul_z/y7a6dnkf/1/
Mainly it's 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 large screens it's shown two cards by column.
The problem is that cards sometimes different height. For example for user 2 his role change : "Enseignant Chercheur Astrophysique Hautes Energies" instead "CDD IT Informatique" so this line take two lines instead of one line. And so the card for user 2 has height different to others cards.
How could I fix it ? I don't know the cards size, so I could not fix it implicitly (and in any case it's probably not a good idea).
P.S.: I have also the same problem if logos have different sizes. Despite playing with img-fluid, widht, max-widht, max-height etc some logos change the height of card. But I think at first I have to fix the simple height problem.
The col elements already have the same height - Bootstrap v5's grid implementation based on flexbox already sees to that.
All you need to do is make the cards take 100% height of their parent:
.card { height: 100%; }