Thumbnails
Image Thumbnail
Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
<div class="row row-sm">
<div class="col-6 col-md-3">
<img alt="Responsive image" class="img-thumbnail" src="../assets/img/media/9.jpg">
</div>
<div class="col-6 col-md-3">
<img alt="Responsive image" class="img-thumbnail" src="../assets/img/media/13.jpg">
</div>
<div class="col-6 col-md-3 mg-t-10 mg-sm-t-0">
<img alt="Responsive image" class="img-thumbnail" src="../assets/img/media/14.jpg">
</div>
<div class="col-6 col-md-3 mg-t-10 mg-sm-t-0">
<img alt="Responsive image" class="img-thumbnail" src="../assets/img/media/15.jpg">
</div>
</div>Aligning Thumbnails
Align images with the helper float classes or text alignment classes.
<div class="clearfix">
<img src="../assets/img/media/10.jpg" class="float-sm-left wd-100p wd-sm-200" alt="img">
<img src="../assets/img/media/11.jpg" class="float-sm-right wd-100p wd-sm-200 mg-t-10 mg-sm-t-0" alt="img">
</div>Custom content Thumbnails
Using the images in custom content thumbnails
<div class="row row-sm">
<div class="col-xs-12 col-md-6">
<div class="img-thumbnail">
<a href="#">
<img src="../assets/img/media/9.jpg" alt="thumb1" class="thumbimg">
</a>
<div class="caption">
<h5>Thumbnail label</h5>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="btn btn-list">
<a href="#" class="btn ripple btn-primary" role="button">Button</a>
<a href="#" class="btn ripple btn-secondary" role="button">Button</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="img-thumbnail">
<a href="#">
<img src="../assets/img/media/8.jpg" alt="thumb1" class="thumbimg">
</a>
<div class="caption">
<h5>Thumbnail label</h5>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="btn btn-list">
<a href="#" class="btn ripple btn-primary" role="button">Button</a>
<a href="#" class="btn ripple btn-secondary" role="button">Button</a>
</div>
</div>
</div>
</div>
</div>Responsive Thumbnails
Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
<div><img alt="Responsive image" class="img-fluid" src="../assets/img/media/7.jpg"></div>
Background Image
Make image as background to your content using the helper or utilities classes.
What Does Royalty-Free Mean?
Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.
<figure class="pos-relative mg-b-0">
<img alt="Responsive image" class="img-fit-cover" src="../assets/img/media/12.jpg">
<figcaption class="pos-absolute a-0 pd-25 bg-black-5 tx-white-8">
<h6 class="tx-14 tx-sm-16 tx-white tx-semibold mg-b-15 mg-sm-b-20">What Does Royalty-Free Mean?</h6>
<p class="mg-b-0">Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.</p>
</figcaption>
</figure>