Menu
Having an unusual issue with Bootstrap 4's carousel, it was working normally then I must have changed something somewhere, tried deleting it and same issue was occurring. My arrows aren't in the right position see image
<body>
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="landmarks.html">Landmarks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="images.html">Image Gallery</a>
</li>
</ul>
<div class="container" align="center">
<h1 class="display-5">Gallery</h1>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="beach.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="lake.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="martyrsquare.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
The tiny amount of css I have wouldn't affect any of this but just in case
.row{
padding: 20px;
}
body{
background-color: #e5e5e5;
}
463
asked Dec 10 '25 04:12
The arrows seem to be in the right place. It seems like your image size is what is causing it too look out of place.
Try adding the following class to your css.
.carousel-item img {
width: 100%;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
