Place image to bottom right in bootstrap carousel

Question

I'm trying to add one (or two) small image indicator on the bottom right part of the bootstrap carousel.

I know you can add text in the carousel but I'm not sure how to add image and place it to the bottom right.

<div id="carouselExampleControls" class="carousel slide card-img-top" data-bs-ride="carousel" data-bs-interval="false">
<div class="carousel-inner">
    <div class="carousel-item active">
        <img src="https://placehold.co/220x180?text=Img+1" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
        <img src="https://placehold.co/220x180?text=2" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
        <img src="https://placehold.co/220x180?text=3" class="d-block w-100" alt="...">
    </div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
</button>

score 1 · Accepted Answer · answered Mar 25 '23 at 18:20

You can do this by adding the img within the .carousel and use the position utility classes.
Something like the following:

<img class="border border-success position-absolute bottom-0 end-0 m-5" src="https://placehold.co/50?text=Img+sm">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">

<div id="carouselExampleControls" class="carousel slide card-img-top" data-bs-ride="carousel" data-bs-interval="4000">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://placehold.co/220x180?text=Img+1" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://placehold.co/220x180?text=2" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://placehold.co/220x180?text=3" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
  <img class="border border-success position-absolute bottom-0 end-0 m-5" src="https://placehold.co/50?text=Img+sm">

</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>

Place image to bottom right in bootstrap carousel

1 Answers1