Buen día con todos, me encuentro desarrollando un sitio web en Angular con Bootstrap, y una de mis secciones contiene reseñas de usuarios, pero hay algunas mas cortas que otras, y eso hace que los divs que contienen la información sean de diferentes tamaños, y eso hace que queden espacios en blanco grandes entre los divs, y eso no es estéticamente agradable. La información la cargo desde un array para evitar copiar y pegar código
Código HTML:
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col-lg-4 col-sm-6" *ngFor="let person of people">
<div class="review">
<div class="review-head p-4 bg-white theme-shadow">
<div class="text-warning">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<p>{{person.testimonial}}</p>
</div>
<div class="review-person mt-4 d-flex align-items-center">
<img class="rounded-circle" [src]="person.img" style="width: 100px;">
<div class="ms-3">
<h5>{{person.name}}</h5>
<small>{{person.university}}</small>
</div>
</div>
</div>
</div>
</div>
Las clases que uso, son clases de bootstrap, los unicos estilos css personalizados que uso son estos:
.review-head{
position: relative;
}
.review small{
font-weight: 600;
text-transform: uppercase;
}
.review-head::after{
content: "";
width: 28px;
height: 28px;
position: absolute;
bottom: -14px;
background-color: white;
transform: rotate(45deg);
}
.review-person{
width: 100%;
}
Como puedo solucionar este problema?