How can I position Bootstrap carousel thumbnails above and to the side? - css

Question

I wish to create variations of a bootstrap 5 thumbnails carousel, where the thumbnails are on the top or on the left side of the slides section (I need these two variations). Current default is at the bottom.
The base model functions well. However, I cannot split it into rows (thumbnails) and columns (thumbnails on left column) - when I try to wrap the carousel section differently the end result is the same.
Below is the base code, after, followed by a snippet of how I tried to split it unsuccessfully.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<!-- Carousel wrapper -->
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-bs-ride="carousel">
<!-- Thumbnails -->
<div class="row">
<div class="">
<div class="my slider carousel-indicators" style="margin-bottom: ;">
<div class="container op position-relative">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1" style="width: 100px;">
<img class="d-block w-100"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(88).webp" class="img-fluid" />
</button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2" style="width: 100px;">
<img class="d-block w-100"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(121).webp" class="img-fluid" />
</button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3" style="width: 100px;">
<img class="d-block w-100"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(31).webp" class="img-fluid" />
</button>
</div>
</div>
</div>
</div>
<!-- Thumbnails -->
<!-- Slides -->
<div class="carousel-inner mb-5">
<div class="carousel-item active">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(88).webp" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(121).webp" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(31).webp" class="d-block w-100" alt="..." />
</div>
</div>
<!-- Slides -->
<!-- Controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
<!-- Controls -->
</div>
</div>
<!-- Carousel wrapper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
I tried to split it with rows/grid wrapping to differ thumbnails and slides. Yet,the thumbnail section stays at the bottom of the screen.
below is an example for placing thumbnails at top, as with other tries I made, the result is the same, i.e. the thumbnails at the bottom:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<!-- Carousel wrapper -->
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-bs-ride="carousel">
<!-- Thumbnails -->
<div class="col">
<div class="row">
<div class="my slider carousel-indicators" style="margin-bottom: ;">
<div class="container op position-relative">
.... closing with </div> etc'
<!--Thumbnails-->
<!-- Slides -->
<div class="row">
<div class="col">
<div class="carousel-inner mb-5">
<div class="carousel-item active">
.... closing with </div> etc'
<!-- Slides -->
</div>
</div>
Def
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
I also used variations of col md-4, inverse the row/col...didn't work.
I managed to create the layout without a carousel, but I'd like to have a cleaner code and where media is served from one similar structure.
Any input, reference would be great.

Answer 1

I don't think I'd try to apply rows and columns here. There's just too much complexity with what's going on inside the carousel. Instead I'd shift the carousel with padding to make room for the thumbs.
.carousel.carousel-thumbs-top {
padding-top: 60px;
}
.carousel.carousel-thumbs-top .carousel-indicators {
top: 0;
bottom: auto;
}
.carousel .carousel-indicators button {
width: 100px !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<!-- Carousel wrapper -->
<div id="carouselExampleIndicatorsLeft" class="carousel slide carousel-fade carousel-thumbs-top" data-bs-ride="carousel">
<!-- Thumbnails -->
<div class="slider carousel-indicators position-absolute">
<button type="button" data-bs-target="#carouselExampleIndicatorsLeft" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1">
<img class="d-block w-100"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(88).webp" class="img-fluid" />
</button>
<button type="button" data-bs-target="#carouselExampleIndicatorsLeft" data-bs-slide-to="1" aria-label="Slide 2">
<img class="d-block w-100"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(121).webp" class="img-fluid" />
</button>
<button type="button" data-bs-target="#carouselExampleIndicatorsLeft" data-bs-slide-to="2" aria-label="Slide 3">
<img class="d-block w-100"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(31).webp" class="img-fluid" />
</button>
</div>
<!-- Slides -->
<div class="carousel-inner mb-5">
<div class="carousel-item active">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(88).webp" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(121).webp" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(31).webp" class="d-block w-100" alt="..." />
</div>
</div>
<!-- Controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<!-- Carousel wrapper -->
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>