To begin, the layout needs to be adjusted. Ensure that all content within the body is contained within a container, row, and col-12.
The carousel-related code should specifically be placed inside the col-12. This arrangement ensures that the carousel aligns with the width of the nav, with space on both sides.
The controllers have an absolute position. Two of their parent elements use relative positioning. If you require more insight into CSS positioning, refer to this informative post.
There are various methods for moving the controllers outside of the carousel design.
Method 1
- Place the controller code below the container.
<div class="container">
<div class="row">
<div class="col-12">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#video-carousel-example2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-danger" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#video-carousel-example2" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-danger" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
- Enclose all the aforementioned code within another element having the
position-relative class.
<div class="position-relative">
<div class="container">
<div class="row">
<div class="col-12">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#video-carousel-example2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-danger" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#video-carousel-example2" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-danger" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Refer to this pen for further clarification.
Method 2
You can modify the position property of the carousel and the col-12 by using the following code snippet. Both will now be relatively positioned.
.position-initial {
position: initial !important;
}
<div class="postion-relative">
<div class="container">
<div class="row">
<header class="col-12 position-initial">
<!--Carousel Wrapper-->
<div id="video-carousel-example2" class="carousel slide carousel-fade position-initial" data-ride="carousel">
</div>
</header>
</div>
</div>
</div>
Now, with the div containing the position-relative class occupying full width and the controllers being absolutely positioned, the controllers remain within the div's full width.
Visit this pen for additional insights.