Bootstrap 5 responsive carousel text problems - html

Question

I'm building a new website, I'm using bootstrap 5. i have added a responsive carousel to the header field, but the text and button in the carousel are not compatible. I am adding a few images and source code to better understand the 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>BİZİ ARAMAKTAN ÇEKİNMEYİN</h3>
<p>Teknik Destek Hizmetleri</p>
<p>[phone]</p>
<button type="button" class="btn btn-outline-danger">Detaylı Bilgi</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>Yakınınızda bir <span style="color:#0597d4;">3CX</span> Distribütörü arıyorsanız, doğru
yerdesiniz.</h3><br />
<button type="button" class="btn btn-outline-info">Detaylı Bilgi</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 BİLİŞİM</h3>
<p><span style="color: red; ">FORTİNET TÜRKİYENİN</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>Sektör tecrübemizi yeni neslin çalışma koşulları ile
birleştirerek,</h3>
<p>kurumların iç dinamiklerine özel avantajlı
çözüm üretme vizyonundan yola çıktık.</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>Fortinet olarak, yerel alan ağı, uzak ağ, kablosuz ağ, ağ güvenliği ve güvenli uzaktan erişim gibi
</h3>
<p>ağ teknolojilerinin kurulumu ve devreye alınması gibi ağ çözümlerini sunuyoruz.</p>
</div>
</div>
</div>
</div>
<!-- Carousel -->
CSS code
.carousel-caption{
transform: translateY(-50%) ;
bottom: initial;
top: 50%;
}
enter image description here
enter image description here

Answer 1

try to add d-flex class to the carousel-caption, also add align-items-center
<div class="carousel-caption align-items-center d-flex">
<h3>BİZİ ARAMAKTAN ÇEKİNMEYİN</h3>
<p>Teknik Destek Hizmetleri</p>
<p>[phone]</p>
<button type="button" class="btn btn-outline-danger">Detaylı Bilgi</button>
</div>