how to make the cards all default to the same size with bootstrap?

Question

I'm trying to make these cards the same sizes. In bootstrap, this problem is usually solved with h-100 as shown below, but I still didn't get it.

Now follow all the code below to get a better idea

(function () {
  "use strict";

  var carousels = function () {
    $(".owl-carousel1").owlCarousel({
      loop: true,
      center: true,
      margin: 0,
      responsiveClass: true,
      nav: false,
      responsive: {
        0: {
          items: 1,
          nav: false
        },
        680: {
          items: 2,
          nav: false,
          loop: false
        },
        1000: {
          items: 3,
          nav: true
        }
      }
    });
  };

  (function ($) {
    carousels();
  })(jQuery);
})();

body {
  background: aliceblue;
}

.gtco-testimonials {
  position: relative;
  margin-top: 30px;
}
.gtco-testimonials h2 {
  font-size: 30px;
  text-align: center;
  color: #333333;
  margin-bottom: 50px;
}
.gtco-testimonials .owl-stage-outer {
  padding: 30px 0;
}
.gtco-testimonials .owl-nav {
  display: none;
}
.gtco-testimonials .owl-dots {
  text-align: center;
}
.gtco-testimonials .owl-dots span {
  position: relative;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: block;
  background: #fff;
  border: 2px solid #01b0f8;
  margin: 0 5px;
}
.gtco-testimonials .owl-dots .active {
  box-shadow: none;
}
.gtco-testimonials .owl-dots .active span {
  background: #01b0f8;
  box-shadow: none;
  height: 12px;
  width: 12px;
  margin-bottom: -1px;
}
.gtco-testimonials .card {
  background: #fff;
  box-shadow: 0 8px 30px -7px #c9dff0;
  margin: 0 20px;
  padding: 0 10px;
  border-radius: 20px;
  border: 0;
}
.gtco-testimonials .card .card-img-top {
  max-width: 100px;
  border-radius: 50%;
  margin: 15px auto 0;
  box-shadow: 0 8px 20px -4px #95abbb;
  width: 100px;
  height: 100px;
}
.gtco-testimonials .card h5 {
  color: #01b0f8;
  font-size: 21px;
  line-height: 1.3;
}
.gtco-testimonials .card h5 span {
  font-size: 18px;
  color: #666666;
}
.gtco-testimonials .card p {
  font-size: 18px;
  color: #555;
  padding-bottom: 15px;
}
.gtco-testimonials .active {
  opacity: 0.5;
  transition: all 0.3s;
}
.gtco-testimonials .center {
  opacity: 1;
}
.gtco-testimonials .center h5 {
  font-size: 24px;
}
.gtco-testimonials .center h5 span {
  font-size: 20px;
}
.gtco-testimonials .center .card-img-top {
  max-width: 100%;
  height: 120px;
  width: 120px;
}

@media (max-width: 767px) {
  .gtco-testimonials {
    margin-top: 20px;
  }
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
  outline: 0;
}
.owl-carousel button.owl-dot {
  outline: 0;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CodePen - Testimonials Carousel</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"
    />
    <link rel="stylesheet" href="custom.css" />
  </head>
  <body>
    <!-- partial:index.partial.html -->
    <div class="gtco-testimonials">
      <h2>Testimonials Carousel - Cards Comments</h2>
      <div class="owl-carousel owl-carousel1 owl-theme">
        <div>
          <div class="card text-center">
            <img
              class="card-img-top"
              src="https://media.licdn.com/dms/image/D4D03AQE7KFvlHXMbSw/profile-displayphoto-shrink_200_200/0/1691608142028?e=1697673600&v=beta&t=fMtW7RRDyAwY17qu_2XDx-RRyLlfhkPeQIAeLlOdL3I"
              alt=""
            />
            <div class="card-body">
              <h5>
                Luana Brenna Negreiros <br />
                <span> Assistente de segurança da informação Jr | Bacharel em Engenharia de Software pela Universidade Federal do Ceará</span>
              </h5>
              <p class="card-text">
                “ Ter o Allan como parceiro de equipes em projetos e acompanhar seu desenvolvimento em startups, ambiente acadêmico e profissional, com certeza foi uma honra, sempre sendo multitarefas
                 com qualidade, criatividade e inovação. Tanto como design de produto como desenvolvedor, gerente de projeto e gestão de pessoas em grupo, desempenhou habilidades de fato admiráveis. ”
              </p>
            </div>
          </div>
        </div>
        <div>
          <div class="card text-center">
            <img
              class="card-img-top"
              src="https://media.licdn.com/dms/image/D4D35AQEGtOAWGRV62A/profile-framedphoto-shrink_800_800/0/1675358199870?e=1693076400&v=beta&t=1emSXI5J5piYembg09VVcOUJfg2VW2j1iKQO3gyrG28"
              alt=""
            />
            <div class="card-body">
              <h5>
                Luis Felipe Oliveira<br />
                <span>Gerente de Projetos | Product Owner | Coordenador de Tecnologia e Professor</span>
              </h5>
              <p class="card-text">
                “ Allan Michel tem uma excelente criatividade no tocante a projetos de desenvolvimento de software.
                Com fluidez no backend e no frontend, desenvolve projetos com harmonia e com segmentos muito bem estabelecidos nas análises de requisitos. ”
              </p>
            </div>
          </div>
        </div>
        <div >
          <div class="card text-center">
            <img
              class="card-img-top"
              src="https://media.licdn.com/dms/image/C4D03AQGTz6u1CkqebA/profile-displayphoto-shrink_200_200/0/1599489448523?e=1697673600&v=beta&t=iMEVUYWsPjnJbPPn7f9baUVfsBbD3woBDQvvDHZhEcc"
              alt=""
            />
            <div class="card-body">
              <h5>
                Anderson Uchôa<br />
                <span> PhD in Software Engineering, Data Scientist R&D </span>
              </h5>
              <p class="card-text">
                “ Nam libero tempore, cum soluta nobis est eligendi optio cumque
                nihil impedit quo minus id quod maxime placeat ”
              </p>
            </div>
          </div>
        </div>
        <div>
          <div class="card text-center">
            <img
              class="card-img-top"
              src="https://media.licdn.com/dms/image/C4D03AQGUkSINO8FVCg/profile-displayphoto-shrink_800_800/0/1661017159924?e=1697673600&v=beta&t=O3kZPHZbAcqinaPrwJsYKRrPQZ1geSfmi4y3XnK48ZM"
              alt=""
            />
            <div class="card-body">
              <h5>
                Elisângela Rodrigues<br />
                <span>Professora Adjunta de Estatística e Ciência de Dados - UFC/Pesquisadora Cidacs/Fiocruz</span>
              </h5>
              <p class="card-text">
                “ Nam libero tempore, cum soluta nobis est eligendi optio cumque
                nihil impedit quo minus id quod maxime placeat ”
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- partial -->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

I can't see what I can change in the code to make this code how I want it. in addition to the h-100, I've also tried to make some changes with d-flex, but it still didn't work

how to make the cards all default to the same size with bootstrap?

0 Answers0