I'm struggling to set the correct position for prev/next btns in a bootstrap5 carousel. The initial code I used as model was for a carousel that displays 4 images at once, I changed to 3 images at once. I added also some space between images.
I know that prev/next btns have position:absolute, I changed to position:relative and tried to position it by changing margins but it was worse.
Is there a solution on how to fix this problem?
The buttons look like this now: buttons

<div >
                    <div >
                        <div id="Carousel-2"  data-bs-ride="carousel">
                            <div  role="listbox">
                                <div >
                                    <div >
                                        <div >
                                            <div >
                                                <img src="./images/woman1.jpg" >
                                            </div>
                                            <div ><strong>Jane Dow</strong>
                                                <p  style="font-size: 13px;">CEO - AXA Group</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div >
                                    <div >
                                        <div >
                                            <div >
                                                <img src="./images/man1.jpg" >
                                            </div>
                                            <div ><strong>Dave Johnson</strong>
                                                <p  style="font-size: 13px;">Marketing Manager - Johnson's & Co</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div >
                                    <div >
                                        <div >
                                            <div >
                                                <img src="./images/man2.jpg" >
                                            </div>
                                            <div ><strong>Roger Smith</strong>
                                                <p  style="font-size: 13px;">CEO - Hi-Tech Intl.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div >
                                    <div >
                                        <div >
                                            <div >
                                                <img src="./images/woman2.jpg" >
                                            </div>
                                            <div ><strong>Diana Russel</strong>
                                                <p  style="font-size: 13px;">Manager - Creativity Hub</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <a  href="#Carousel-2" role="button" data-bs-slide="prev">
                                <span  aria-hidden="true"></span>
                            </a>
                            <a  href="#Carousel-2" role="button" data-bs-slide="next">
                                <span  aria-hidden="true"></span>
                            </a>
                        </div>
                    </div>
                </div>

CodePudding user response：

if you want to make them stable in fixed positions use this code give your carousel position relative as a parent for your prev and next buttons.

the top and transform make your buttons stay in the middle of your container.

     .carousel {
        position: relative;
     }           
     .carousel-control-prev , .carousel-control-next {
        position: absolute;
        top: 50%;
        transform: TranslateY(-50%);
     }
     .carousel-control-prev {
        right: auto;
        left: 20px;
     }
     .carousel-control-next {
        left: auto;
        right: 20px;
     }