I have implemented the Bootstrap 4 carousel slider with the help of this example.
In the example provided, I am trying to align the bottom thumbnails to the right side along with the thumbnail text, similar to the image attached below.
https://i.sstatic.net/aVcQ4.jpg
Here is my code :
<div class="row" id="slider">
<div class="col-md-5">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner" style="float:left;">
<div class="active item carousel-item" data-slide-number="0">
<img src="http://placehold.it/1200x480&text=one" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="1">
<img src="http://placehold.it/1200x480/888/FFF" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="2">
<img src="http://placehold.it/1200x480&text=three" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="3">
<img src="http://placehold.it/1200x480&text=four" class="img-fluid">
</div>
<a class="carousel-control left pt-3" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
<a class="carousel-control right pt-3" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-md-7">
<ul class="carousel-indicators list-inline" style="float:left;">
<li class="list-inline-item active" data-slide-to="0" data-target="#myCarousel">
<a id="carousel-selector-0" class="selected">
<img src="http://placehold.it/80x60&text=one" class="img-fluid">
</a>
</li>
<li class="list-inline-item" data-slide-to="1" data-target="#myCarousel">
<a id="carousel-selector-1">
<img src="http://placehold.it/80x60&text=two" class="img-fluid">
</a>
</li>
<li class="list-inline-item" data-slide-to="2" data-target="#myCarousel">
<a id="carousel-selector-2">
<img src="http://placehold.it/80x60&text=three" class="img-fluid">
</a>
</li>
<li class="list-inline-item" data-slide-to="3" data-target="#myCarousel">
<a id="carousel-selector-3">
<img src="http://placehold.it/80x60&text=four" class="img-fluid">
</a>
</li>
</ul>
</div>
</div>
/*******In Bootstrap CSS*******/ .carousel-indicators {display:inline-block;}