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.