I'm trying to align the height of Card (bootstrap) in SwiperSlide (swpier.js) so that they have the same height, I tried several things but nothing worked.
<Container>
<Swiper
modules={[Navigation, Pagination, Scrollbar, A11y]}
spaceBetween={50}
slidesPerView={2}
navigation
pagination={{ clickable: true }}
scrollbar={{ draggable: true }}
>
<SwiperSlide>
<Card border="success" className="text-center h-100">
<Card.Body>
<Card.Text>
Some quick example text to build on the card title and make up
the bulk of the card's content. Some quick example text to build
on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up
the bulk of the card's content. Some quick example text to build
on the card title and make up the bulk of the card's content.
</Card.Text>
</Card.Body>
</Card>
</SwiperSlide>
<SwiperSlide>
<Card border="success" className="text-center h-100">
<Card.Body>
<Card.Text>Some</Card.Text>
</Card.Body>
</Card>
</SwiperSlide>
<SwiperSlide>
<Card border="danger" className="text-center">
<Card.Body>
<Card.Text>
Some quick example text to build on the card title and make up
the bulk of the card's content.
</Card.Text>
</Card.Body>
</Card>
</SwiperSlide>
<br />
</Swiper>
</Container>
Are there any other systems that can fix this? I use the latest things
I'm trying to align the height of Card (bootstrap) in SwiperSlide (swpier.js) so that they have the same height, I tried several things but nothing worked.
<Container>
<Swiper
modules={[Navigation, Pagination, Scrollbar, A11y]}
spaceBetween={50}
slidesPerView={2}
navigation
pagination={{ clickable: true }}
scrollbar={{ draggable: true }}
>
<SwiperSlide>
<Card border="success" className="text-center h-100">
<Card.Body>
<Card.Text>
Some quick example text to build on the card title and make up
the bulk of the card's content. Some quick example text to build
on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up
the bulk of the card's content. Some quick example text to build
on the card title and make up the bulk of the card's content.
</Card.Text>
</Card.Body>
</Card>
</SwiperSlide>
<SwiperSlide>
<Card border="success" className="text-center h-100">
<Card.Body>
<Card.Text>Some</Card.Text>
</Card.Body>
</Card>
</SwiperSlide>
<SwiperSlide>
<Card border="danger" className="text-center">
<Card.Body>
<Card.Text>
Some quick example text to build on the card title and make up
the bulk of the card's content.
</Card.Text>
</Card.Body>
</Card>
</SwiperSlide>
<br />
</Swiper>
</Container>
Are there any other systems that can fix this? I use the latest things
Share Improve this question asked Jan 17 at 15:25 mark88mark88 513 bronze badges 1 |1 Answer
Reset to default 0try this code:
<div class="swiper-slide h-auto">
<div class="w-100 h-100">
<div class="card h-100">
<img src="..." class="" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
align-items:stretch
to.swiper-slide
element. – Raghavendra N Commented Jan 18 at 5:42