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

• css
• reactjs
• typescript
• bootstrap-5
• swiper.js

• I tried your code. It is working fine for me. If you still have this issue try to set align-items:stretch to .swiper-slide element. – Raghavendra N Commented Jan 18 at 5:42

1 Answer 1

try 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>