<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Just copy and paste this code with bootstrap 5 cdn it will not work here as bootsnipp still using 4.1.1</h2> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://placeimg.com/640/480/any" class="d-block w-100"> </div> <div class="carousel-item"> <img src="https://placeimg.com/640/480/any" class="d-block w-100"> </div> <div class="carousel-item"> <img src="https://placeimg.com/640/480/any" class="d-block w-100"> </div> <div class="carousel-item"> <img src="https://placeimg.com/640/480/any" class="d-block w-100"> </div> <div class="carousel-item"> <img src="https://placeimg.com/640/480/any" class="d-block w-100"> </div> </div> </div> <ol class="carousel-indicators"> <li data-bs-target="#carouselExampleIndicators5" data-bs-slide-to="0" class="active thumbnail"><img src="https://placeimg.com/640/480/any" class="d-block w-100"> </li> <li data-bs-target="#carouselExampleIndicators5" data-bs-slide-to="1" class="active thumbnail"><img src="https://placeimg.com/640/480/any" class="d-block w-100"></li> <li data-bs-target="#carouselExampleIndicators5" data-bs-slide-to="2" class="active thumbnail"><img src="https://placeimg.com/640/480/any" class="d-block w-100"></li> <li data-bs-target="#carouselExampleIndicators5" data-bs-slide-to="3" class="active thumbnail"><img src="https://placeimg.com/640/480/any" class="d-block w-100"></li> <li data-bs-target="#carouselExampleIndicators5" data-bs-slide-to="4" class="active thumbnail"><img src="https://placeimg.com/640/480/any" class="d-block w-100"></li> </ol> </div> </div>

.carousel-inner>.item>img, .carousel-inner>.item>a>img { display: block; height: auto; max-width: 100%; line-height: 1; margin:auto; width: 100%; } .carousel-inner > .carousel-item > img { margin: 0; max-width: 100%; max-height:350px;} .carousel-indicators li { width: 200px; height: 100%; opacity: 0.8; } .carousel-indicators { position: static; } .carousel-indicators li { width: 300px; height: 100%; opacity: 0.8; }