Bootstrap Image Shapes, Rounded Corners Images, Circle Image, Image Thumbnail, Images Aligning, Bootstrap Responsive Images, Bootstrap Image class

Bootstrap provide best solution to make images shapes as we want for our websites. Before we have use many css tag to make image rounded corner, circle shape etc. But now you have to use simple Bootstrap class to change shape of your image.

Bootstrap Images Shapes

For Rounded Corners

To make image rounded corner you have to use simple class (.rounded)

Example:- 
<img src="dstechstunt.jpg" class="rounded">

For Circle Image

To make image circle you have to use simple class (.rounded-circle)

Example:- 
<img src="dstechstunt.jpg" class="rounded-circle">

For Image Thumbnail

To make image Thumbnail you have to use simple class (.img-thumbnail)

Example:- 
<img src="dstechstunt.jpg" class="img-thumbnail">

Images Aligning

If you want to align image like if in one div you want one image should come left side and second image should come right side. We call it image float. To float image you have to use Bootstrap classes (.float-left and .float-right)

Example:- 
<img src="dstechstunt.jpg" class="float-left">
<img src="dstechstunt.jpg" class="float-right">

Responsive Images

As we know image came in different sizes and we use different sizes screen also, For that we should have responsive images so the can resize itself acordignly the screen size.

Create responsive images by adding an .img-fluid class to the <img> tag. The image will then scale nicely to the parent element. The .img-fluid class applies max-width: 100%; and height: auto; to the image.

Example:-
<img class="img-fluid" src="dstechstunt.jpg">