While working on a personal HTML/CSS/Bootstrap 5 project as a self-taught learner, I have encountered some beginner doubts. My challenge is to ensure that the site remains responsive across various devices such as mobile and tablet. Specifically, I am struggling to center the yellow button in relation to the three bars representing the carousel slides. Despite trying techniques like margin:auto;, text-align:center; and align-items: center;, I haven't been successful in achieving this. Can anyone advise how I can consistently centralize the button next to the carousel bars regardless of screen dimensions?
https://i.sstatic.net/seKeh.jpg
.buttonPosition {
position: absolute;
bottom: 15%;
left: 41.5%;
font-size: 13px;
color: black;
display: inline-block;
padding: 0.9em 1.4em;
max-width: 40%;
z-index: 2;
}
.carousel-item h5 {
font-size: 48px;
letter-spacing: 2px;
color: rgb(185, 204, 240);
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
bottom: 65%;
z-index: 2;
}
.carousel-item p {
margin: auto;
font-size: 32px;
line-height: 1.9;
z-index: 2;
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: rgb(255, 255, 255);
}
.carousel-item {
height: 124vh;
min-height: 60px;
}
.shadow {
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.carousel-inner::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.35);
z-index: 1;
}
.active {
color: rgb(14, 153, 100)!important;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
} <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbd9d4d4cfc8cfc9dacbfb8e95899588">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a4945584f6a18041b1b041c">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="482a27273c3b3c3a2938087d667a667b">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
<div id="home" class="carousel slide" data-bs-ride="carousel" data-bs-interval="7500" data-bs-pause="false">
<div class="carousel-indicators">
<button type="button" data-bs-target="#home" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#home" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#home" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./assets/images/plants.jpg" class="w-100" alt="plants">
<h5 class="carousel-caption">Professional landscaping services</h5>
<p class="shadow"> From garden maintenance to cleaning and repairs, we are passionate about our work. Contact us for quotes.</p>
<a href="#" class="btn btn-warning mt-3 buttonPosition" data-bs-toggle="modal" data-bs-target="#exampleModal">Contact Us <i class="uil uil-message button__icon"></i></a>
</div>
<div class="carousel-item">
<img src="./assets/images/plant.jpg" class="w-100" alt="plant">
<h5 class="carousel-caption">Modern and contemporary style</h5>
<p class="shadow">Let landscape architecture be the reason for your well-being. We work in your garden with seriousness, professionalism, commitment, and dedication.</p>
<a href="#" class="btn btn-warning mt-3 buttonPosition" data-bs-toggle="modal" data-bs-target="#exampleModal">Contact Us <i class="uil uil-message button__icon"></i></a>
</div>
<div class="carousel-item">
<img src="./assets/images/garden.jpg" class="w-100" alt="garden">
<h5 class="carousel-caption">Symbiosis between a project and your quality of life</h5>
<p class="shadow">We take care of every green space down to the smallest detail, bringing harmony together with our knowledge and experience.</p>
<a href="#" class="btn btn-warning mt-3 buttonPosition" data-bs-toggle="modal" data-bs-target="#exampleModal">Contact Us <i class="uil uil-message button__icon"></i></a>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#home" 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="#home" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>