I'm utilizing the carousel from Bootstrap 5, and here is the image.
https://i.sstatic.net/dpmjf.jpg
The previous and next icons are overlapping with the text. I would like to reposition them, if possible, just above the upvote/downvote buttons. However, they seem to be rendering inside the "inner carousel" class regardless of where I place the code related to the icons. I have read the W3C documentation and have come across several posts on Stack Overflow stating that changing the formatting for the carousel is challenging, but if anyone has any ideas, please share.
Here is my code.
<div class="col-md-10 col-lg-8 col-xl-7">
<!-- Carousel -->
<!-- data-bs-ride="carousel" excluded -->
<div id="demo" class="carousel slide" data-interval="false" >
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row" id = "message-body">
<h1 style="text-align: center">Use Left and Right Arrows </h1>
<h1 style="text-align: center">to Scroll</h1>
<h1 style="text-align: center">Through Questions</h1>
</div>
</div>
<%
var max = questions.length
for (var i = 0; i < max; i++) {
relevance = questions[i].upvotes
%>
<div class="carousel-item" style="text-align: justify" >
<div class="row" id = "message-body">
<h2><%= questions[i].title %></h2>
<p><%= questions[i].body %></p>
</div>
<div class="row">
<p><strong>Posted by: </strong><%= questions[i].userid.username %> on <%= questions[i].datePosted.toDateString() %> </p>
<p id= "questionID"> type="number"><%= questions[i]._id %></p>
<script>$("#questionID").hide(); </script>
</div>
</div>
<% } %>
<!-- Left and right controls/icons -->
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
<!-- Blank Row -->
<div class="row gx-4 gx-lg-5 justify-content-center"></div>
<!-- Upvote and Downvote Buttons -->
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="text-center" style="width: 100%; white-space: nowrap;">
<button style = "display: inline-block; width: 20%; height: 50%; border:2px solid black; border-radius: 10px; background-color: none; margin-left:20px" id="minus"><i class="fas fa-thumbs-down"></i></button>
<p id = "score" type="number" class="text-center" style = "display: inline-block; text-align: centered; width: 50%; height: 40%;"> <%= relevance %> </p>
<button style = "display: inline-block; width: 20%; height: 50%; border-radius: 10px; border:2px solid black; background-color: none" id="plus"><i class="fas fa-thumbs-up"></i></button>
</div>
<div class="row" >
<button id="submitButton" style = "border-radius: 8px; margin-left: 20px; background-color:darkcyan; width: 200px; margin-bottom:15px" type="submit">View Responses</button>
</div>
</div>
</div>
</div>