Bootstrap Thumbnails
So many websites need a way to layout images, videos, etc., Bootstrap has an easy way to do this with thumbnails.
- Add a <a> tag with the class of .thumbnail around an image.
Example:
<div class="container"> <div class="row"> <div class="col-xs-3"> <a href="#" class="thumbnail"> <img src="/examples/images/125x125.jpg" alt="125x125"> </a> </div> <div class="col-xs-3"> <a href="#" class="thumbnail"> <img src="/examples/images/125x125.jpg" alt="125x125"> </a> </div> <div class="col-xs-3"> <a href="#" class="thumbnail"> <img src="/examples/images/125x125.jpg" alt="125x125"> </a> </div> <div class="col-xs-3"> <a href="#" class="thumbnail"> <img src="/examples/images/125x125.jpg" alt="125x125"> </a> </div> </div> </div>
OUTPUT:
Thumbnail Carousel – 1 :
Bootstrap carousel with thumbnails is an improved version of the standard bootstrap carousel.
Example:
<div class="container my-4"> <!--Carousel Wrapper--> <div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel"> <!--Slides--> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(88).jpg" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(121).jpg" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg" alt="Third slide"> </div> </div> <!--/.Slides--> <!--Controls--> <a class="carousel-control-prev" href="#carousel-thumb" 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="#carousel-thumb" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> <!--/.Controls--> <ol class="carousel-indicators"> <li data-target="#carousel-thumb" data-slide-to="0" class="active"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Others/Carousel-thumbs/img%20(88).jpg" class="img-fluid"></li> <li data-target="#carousel-thumb" data-slide-to="1"><img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Others/Carousel-thumbs/img%20(121).jpg" class="img-fluid"></li> <li data-target="#carousel-thumb" data-slide-to="2"><img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Others/Carousel-thumbs/img%20(31).jpg" class="img-fluid"></li> </ol> </div> <!--/.Carousel Wrapper--> </div>
OUTPUT:
Thumbnail Carousel – 2:
Example:
<style> .carousel { margin: 0 auto; padding: 0 68px; } .carousel .carousel-item { text-align: center; overflow: hidden; height: 160px; } .carousel .carousel-item .img-box { background: #fff; padding: 9px; box-shadow: 0 6px 20px -6px rgba(0,0,0,0.4); } .carousel .carousel-item img { margin: 0 auto; } .carousel-control-prev, .carousel-control-next { width: 68px; background: none; } .carousel-control-prev i, .carousel-control-next i { font-size: 28px; position: absolute; top: 50%; display: inline-block; margin-top: -15px; z-index: 5; left: 0; right: 0; color: rgba(0, 0, 0, 0.8); text-shadow: 0 3px 3px #e6e6e6, 0 0 0 #000; } .carousel-indicators { bottom: -40px; } .carousel-indicators li, .carousel-indicators li.active { width: 10px; height: 10px; border: none; border-radius: 50%; margin: 1px 4px; box-shadow: inset 0 2px 1px rgba(0,0,0,0.2); } .carousel-indicators li { background: #999; border-color: transparent; } .carousel-indicators li.active { background: #555; } </style> <div class="container-xl"> <div class="row"> <div class="col-md-9 mx-auto"> <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="0"> <!-- Carousel indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for carousel items --> <div class="carousel-inner"> <div class="carousel-item active"> <div class="row"> <div class="col-sm-4"><div class="img-box"><img src="/examples/images/thumbs/1.jpg" class="img-fluid" alt=""></div></div> <div class="col-sm-4"><div class="img-box"><img src="/examples/images/thumbs/2.jpg" class="img-fluid" alt=""></div></div> <div class="col-sm-4"><div class="img-box"><img src="/examples/images/thumbs/3.jpg" class="img-fluid" alt=""></div></div> </div> </div> <div class="carousel-item"> <div class="row"> <div class="col-sm-4"><div class="img-box"><img src="/examples/images/thumbs/4.jpg" class="img-fluid" alt=""></div></div> <div class="col-sm-4"><div class="img-box"><img src="/examples/images/thumbs/5.jpg" class="img-fluid" alt=""></div></div> <div class="col-sm-4"><div class="img-box"><img src="/examples/images/thumbs/6.jpg" class="img-fluid" alt=""></div></div> </div> </div> <div class="carousel-item"> <div class="row"> <div class="col-sm-4"><div class="img-box"><img src="/examples/images/thumbs/7.jpg" class="img-fluid" alt=""></div></div> <div class="col-sm-4"><div class="img-box"><img src="/examples/images/thumbs/8.jpg" class="img-fluid" alt=""></div></div> <div class="col-sm-4"><div class="img-box"><img src="/examples/images/thumbs/9.jpg" class="img-fluid" alt=""></div></div> </div> </div> </div> <!-- Carousel controls --> <a class="carousel-control-prev" href="#myCarousel" data-slide="prev"> <i class="fa fa-chevron-left"></i> </a> <a class="carousel-control-next" href="#myCarousel" data-slide="next"> <i class="fa fa-chevron-right"></i> </a> </div> </div> </div> </div>
OUTPUT: