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:
