0

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 Estos son los espacios que quedan

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?

1 respuesta 1

0

Puedes alinear todo con las clases flex de Bootstrap, d-flex align-items-center o d-flex align-items-stretch podrían ayudarte, te recomiendo revisar en la documentación de tu versión de Bootstrap Docs > Utilities > Flex.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.