CODEWITHSUNDEEP
carouselbootstrap-5caption
User981636
User981636

Reputation: 3631

Bootstrap 5 - How to set carousel captions positions

I have a Bootstrap 5 carousel with captions. Is it possible to add any class to the div containing the carousel-item or the carousel-caption to put the captions in the centre of the slide? Or I still need to use CSS as in older versions (below)? I tried align-middle and similar classes but without success.

Eg. Old solution from Fiddle:

.carousel-caption {
    top: 0;
    bottom: auto;
}

Upvotes: 0

Views: 1153

Answers (1)

Zeikman
Zeikman

Reputation: 747

Can't really find a good combination of just using utility class to achieve what you want, but able to find a minimum way where still need to define a manual class :

.carousel-caption {
  transform: translateY(50%);
}

and then add bottom-50 to carousel-caption. Since so it could rather just write

.carousel-caption {
  transform: translateY(50%);
  bottom: 50% !important;
}

LOL :)

#carouselExampleCaptions {
  width: 600px;
  height: 400px;
}

.carousel-caption {
  transform: translateY(50%);
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<div id="carouselExampleCaptions" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://rb.gy/18mzdx" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block bottom-50">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://rb.gy/18mzdx" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block bottom-50">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://rb.gy/18mzdx" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block bottom-50">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Upvotes: 3

Related Questions