I am currently utilizing the Bootstrap 4 carousel. My goal is to adjust the position of the next and previous buttons to be in the top right corner, close to each other. I have been able to achieve this, but I suspect that there may be an error in my CSS code because when I resize the screen, the buttons disappear.
Here is the HTML code:
<div id="featured" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="one.jpg">
</div>
<div class="carousel-item">
<img src="two.jpg" >
</div>
<div class="carousel-item">
<img src="three.jpg" >
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#featured" data-slide="prev">
<span class="fa fa-arrow-circle-left fa-2x" style="color:green"></span>
</a>
<a class="carousel-control-next" href="#featured" data-slide="next">
<span class="fa fa-arrow-circle-right fa-2x" style="color:green"></span>
</a>
</div>
Below is my CSS code:
.carousel-control-prev,
.carousel-control-next{
width:20px;
height: 20px;
background-color: none;
top:calc(-20% -25%);
opacity:.8;
}
.carousel-control-prev{
left:1090px !important;
}