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.

Responsive image
Responsive image
Responsive image
Responsive image
<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>

Align images with the helper float classes or text alignment classes.

img img
<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>

Using the images in custom content thumbnails

thumb1
Thumbnail label

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.

thumb1
Thumbnail label

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.

<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>

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.

Responsive image
<div><img alt="Responsive image" class="img-fluid" src="../assets/img/media/7.jpg"></div>

Make image as background to your content using the helper or utilities classes.

Responsive image
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>