I followed the official documentation to create a Carousel page.
Reference link:
https://getbootstrap.com/docs/4.4/components/carousel/#with-controls
However, the Carousel Control Button is not in the correct position.
img1
img2
It appears that the Carousel Control Button is in the vertical center of the browser rather than the div element. How can I align it in the vertical center of the div?
My environment: Debian 10 / Bootstrap 4.4.1(installed via yarn)
Here is the code snippet:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<nav class="navbar navbar-expand-md navbar-light bg-white" style="z-index: 20;">
<div class="container d-flex">
<a class="navbar-brand" href="#">
<img src="http://lorempixel.com/output/nature-q-c-100-50-5.jpg" style="height: 3rem;">
***
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav nav-pills ml-auto">
<li class="nav-item">
<a class="nav-link active" href="#">***<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">***</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">***</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">***</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">***</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid px-0">
<div id="carouselControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://lorempixel.com/output/animals-q-c-1280-1024-8.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="http://lorempixel.com/output/business-q-c-1280-1024-7.jpg" class="d-block w-100" alt="...">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>