I utilized the Bootstrap documentation and everything is functioning properly, but I am facing an issue with aligning the logo in the center of the carousel, especially when the image transitions. I attempted using a relative parent element, but it seems like there is a misalignment.
<div class="container-fluid g-5">
<div class="row">
<div class="col-12">
<div id="carouselExampleSlidesOnly" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/images/section1/home-image.jpg" class="d-block img-fluid w-100" alt="...">
</div>
<div class="carousel-item">
<img src="/images/section1/home-img-2.jpg" class="d-block img-fluid w-100" alt="...">
</div>
</div>
<div class="logo">
<img src="/images/section1/home-logo.png" alt="">
</div
</div>
</div>
</div>
</div>
#section .container-fluid{
position: relative;
width: 100%;
height: 85vh;
z-index: 0;
}
#section .logo{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}