Is there a way to position the carousel control arrows at the left and right ends of the screen in Bootstrap 4.1.1? I attempted the code below but it didn't yield the desired result.
.carousel-control .icon-prev{
left: 5px
}
.carousel-control .icon-next{
right: 5px
}
Here is the HTML code for the carousel:
<div id="slider3" class="carousel slide mb-5 carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li class="active" data-target="#slider3" data-slide-to="0"></li>
<li data-target="#slider3" data-slide-to="1"></li>
<li data-target="#slider3" data-slide-to="2"></li>
<li data-target="#slider3" data-slide-to="3"></li>
<li data-target="#slider3" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block img-fluid" src="img/car1.jpg" alt="First Slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="img/car2.jpg" alt="Second Slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="img/car3.jpg" alt="Third Slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="img/car2.jpg" alt="Fourth Slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="img/car3.jpg" alt="Fifth Slide">
</div>
</div>
<!-- CONTROLS -->
<a href="#slider3" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#slider3" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>