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