Question 180688 in Html Question posted in
Some basic documentation can be found here.

Html – Same height of columns for bootstrap

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.

Tags:

2

Answers


  1. 0

    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%; }
    Login or Signup to reply.
  2. 0 
    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
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search