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.