Clever Geek Handbook

Bootstrap 4 carousel

Having an unusual problem with Bootstrap 4 carousel it worked fine, then I must have changed something, tried to remove it and the same problem occurred. My hands are not in the correct 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 small amount of css I have will not affect anything, but just in case

.row{
    padding: 20px;
}

body{
    background-color: #e5e5e5;
}
+3


source to share


1 answer


The arrows seem to be in the right place. It seems like your image size is the reason it looks too out of place.

Try adding the following class to your css.



.carousel-item img {
    width: 100%;
}
+2


source






More articles:


All Articles