Images are essential to any web application. It is very important to display them properly. Bootstrap comes with many different classes that will help you to display images appropriately in your web app.

When we talk about responsive images, we mean an image that fits to the size of its container irrespective of its own size. Creating a responsive image in Bootstrap is just a matter of a single class. This feature is especially useful when you are creating a portal for users, and you aren't aware of the size of image they are going to upload. Hence, adding Bootstrap's responsive class to it will be very helpful in such scenarios. You should also remember that Bootstrap won't change the size of the actual image. It will just resize it using CSS properties.

The class used for creating a responsive image is img-responsive. Let's create a grid using Bootstrap's grid system and then add a responsive image to checkout how it fits to the size of the grid. The steps to...