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 that 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 a thumbnail by adding a rounded 1px border.
The above example will return the result as shown below.
If you observe the above result, the bootstrap .img-thumbnail class has shaped the image to a thumbnail by adding a rounded 1px border.
In bootstrap, the .rounded class will add rounded corners to the image.
The above example will return the result 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 into a circle.
The above example will return the result 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 responsive images. The .img-fluid class will apply max-width: 100% and height: auto to the image so that it will scale with the parent element.
For example, if the image size is greater than the containing element, then the responsive class (.img-fluid) will adjust the image size based on the containing element.
This is how we can create 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 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.
The above example will return the result 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.