I'm experiencing an issue with aligning the carousel controls in my Bootstrap4 slider.
Below is the code I have written:
.col-md-4 {
display: inline-block;
margin-left: -10px;
}
.col-md-4 img {
width: 100%;
height: auto;
}
body .carousel-control-prev-icon,
body .carousel-indicators li,
body .carousel-control-next-icon {
background-color: #000;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators mb-0 pb-0">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner no-padding my-5">
<div class="carousel-item active">
...
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>You can also view this CodePen for reference:
https://codepen.io/elsa1234/pen/RYEwWx?editors=1100
Thank you for your assistance