<div id="carouselExampleIndicators" className="carousel slide" data-bs-ride="true">
<div className="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" className="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div className="carousel-inner">
<div className="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
<div>
Captions
</div>
</div>
<div className="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div className="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
<span className="visually-hidden">Previous</span>
</button>
<button className="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="visually-hidden">Next</span>
</button>
</div>This is a standard bootstrap carousel that I have. I am looking to position the Captions outside of each carousel-item, but still within the carousel container below the indicators and make them slide with each carousel-item.
Refer to this image for the desired placement of the captions:
One option is to use absolute positioning, but this may cause issues with the height of the carousel. Are there any alternative methods to achieve this positioning without affecting the height of the carousel?
Additionally, when adding padding or margin to the caption element, it seems to impact the position of the indicators. Why does this happen?