I'm currently in the process of developing a new website and I am utilizing bootstrap 5. One issue I have encountered is that the text and button within the carousel in the header section do not appear to be compatible. To provide better clarity, I will be including some images and source code related to this problem.
<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="3"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/slider/5.png" alt="Los Angeles" class="d-block img-fluid" style="width:100%">
<div class="carousel-caption">
<h3>Feel Free to Call Us</h3>
<p>Technical Support Services</p>
<p>+90 850 111 11 11</p>
<button type="button" class="btn btn-outline-danger">More Details</button>
</div>
</div>
<div class="carousel-item">
<img src="images/slider/1.png" alt="" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>If you are looking for a <span style="color:#0597d4;">3CX</span> Distributor Nearby, You Are at the Right Place.</h3><br />
<button type="button" class="btn btn-outline-info">More Details</button>
</div>
</div>
<div class="carousel-item">
<img src="images/slider/7.png" alt="" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>Fortinet IT Solutions</h3>
<p><span style="color: red; ">FORTINET IS TURKEY'S</span> SELECT PARTNER</p>
</div>
</div>
<div id="special" class="carousel-item">
<img src="images/slider/12.png" alt="" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>We Combine Our Industry Expertise with Modern Work Conditions,
</h3>
<p>Envisioned to Provide Tailored Solutions catering to the Internal Dynamics of Organizations.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/slider/15.png" alt="" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>As Fortinet, we offer network technology solutions such as local area networks, remote networks, wireless networks, network security, and secure remote access
</h3>
<p>we deliver network solutions like installation and operational deployment of network technologies.</p>
</div>
</div>
</div>
</div>
<!-- Carousel -->
CSS code
.carousel-caption{
transform: translateY(-50%) ;
bottom: initial;
top: 50%;