csstwitter-bootstrapbootstrap-carousel

Place image to bottom right in bootstrap carousel

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

enter image description here

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

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