Donald Donald -4 years ago 508
CSS Question

Bootstrap 4 carousel

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;
}

Answer Source

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%;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download