Images are the popular design components of any application. They enhance the display of the application and make them attractive. Bootstrap offers many classes that provide several functionalities to the elements. More specifically, the “img-fluid” is one of those classes that provide responsiveness to the images.

This write-up will describe:

• How to resize an image using Bootstrap?
• How to See Image Size on Different Screens?

How to Resize an Image Using Bootstrap?

The “img-fluid” class is utilized to make the image responsive. Responsive images are those which automatically resize according to the screen sizes. The “img-fluid” class has predefined CSS properties “max-width” with the value “100%” and “height” with the value “auto”.

Check out the example to understand the stated concept.

HTML

Add the HTML “<img>” element with the “src”, “class”, and “alt” attributes, where:

• “src” attribute sets the image’s path.
• “class” is set with the “img-fluid” class to make it responsive.
• “alt” specifies the alternate text that will be displayed if the image is unable to load:

As you can see, the responsive image has been successfully created:

How to See Image Size on Different Screens?

On the web page, right-click and choose the “Inspect” option. As a result, the Developers Tool Window will open, from where you have to click on the “Toggle device toolbar” feature:

Then, click on the “Dimensions: Responsive” option. A drop-down menu will appear. Select the options and see how the image will look on that particular device:

This is how the images can be resized using Bootstrap.

Conclusion

The Bootstrap “img-fluid” class is utilized to make the images responsive. This class has a predefined CSS “max-width” property with the value “100%” and “height” with the value “auto”. To make the image resizable according to the screen sizes, first, add the image using the “<img>” element and associate the “img-fluid” class with it. This write-up has demonstrated how to make the image resize using Bootstrap.