Images and Videos

Images are used on almost every website, so it’s crucial to make them responsive. The images should fit appropriately and overflow should be avoided. Let’s learn how to implement responsive images.

The .img-fluid class

Bootstrap provides us with the .img-fluid class to make images responsive. It contains the following CSS properties:

• max-width: 100%;
• height: auto;

Let’s take a look at the following two cases to understand how the .img-fluid class works:

• Image width > Allotted width: In this case, since the image size is bigger, the image will overflow. We can fit the image in the specified width using .img-fluid.

• Image width < Allotted width: In this case, the .img-fluid class will not perform any action.

Let’s look at the .img-fluid class in action.