In bootstrap, we can change the default appearance of images by applying the different classes like rounder corners, circle or thumbnail based on our requirements.
Following are the three different classes which are useful to change the appearance of images in bootstrap.
The above bootstrap classes will change the default appearance of images like as shown below.
Now, we will learn how to use each class (rounded, rounded-circle and img-thumbnail) in-detail to style your images with examples in bootstrap.
In bootstrap, the .img-thumbnail class will shape the image to thumbnail by adding rounded 1px border.
<img src="fox.png" class="img-thumbnail" />
The above example will return the result like as shown below.
If you observe the above result, the bootstrap .img-thumbnail class has shaped the image to thumbnail by adding rounded 1px border.
In bootstrap, the .rounded class will add rounded corners to the image.
<img src="fox.png" class="rounded" />
The above example will return the result like as shown below.
If you observe the above result, the bootstrap .rounded class has added the rounded corners to the image.
In bootstrap, the .rounded-circle class will shape the image to circle.
<img src="fox.png" class="rounded-circle" />
The above example will return the result like as shown below.
If you observe the above result, the bootstrap .rounded-circle class has shaped the image to circle.
In bootstrap, by adding .img-fluid class to the <img> tag we can create a responsive images. The .img-fluid class will apply max-width: 100% and height: auto to the image so that it will scales with the parent element.
For example, if image size is greater than the containing element, then the responsive class (.img-fluid) will adjust the image size based on the containing element.
<img src="fox.png" class="img-fluid" />
This is how we can create the responsive images by using .img-fluid class in bootstrap.
In bootstrap, we can align the images either by using float helper classes (.float-left, .float-right) or text alignment classes (.text-right, .text-left, or .text-center) like as shown below.
The above example will return the result like as shown below.
If you observe the above result, we aligned images left and right by using bootstrap .float-left and .float-right classes.
In bootstrap, we can horizontally center the image by adding .mx-auto (margin: auto) and d-block (display: block) classes to the images like as shown below.
<img src="fox.png" class="mx-auto d-block" />
The above example will return the result like as shown below.
This is how we can align the images by using bootstrap float or text or margin helper classes based on our requirements.