How to make Bootstrap images responsive

As Google is moving towards mobile-first index and more and more people across the globe are using mobiles/smart phones for surfing the internet, it became necessary that your content of the website adjusts according to the user screens; whether it is a desktop/notebook, a tablet or a smart phone.

The Bootstrap 4 framework has classes specific for making images being responsive that ensure the images in your website adjust to the user screen and their width does not expand to the parent element containing those images.

In the next section, I will show you examples of Bootstrap responsive images by using built-in classes, so keep reading.

Difference between responsive and non-responsive images demo

To show the difference and how easy it is creating the responsive images by using Bootstrap image classes; see the two images in the demo below. The first is made responsive by Bootstrap 4 class while the other is not assigned any class.

Open the demo by following the link and resize the screen to look at how top image adjusts for width and height while scroll bars appear for the second image.

See online demo and code

So how is it done?

The Bootstrap has the .img-fluid class with max-width:100% and auto value for height that ensure images are scaled with parent element.

In the above demo, for making image responsive, I simply used the .img-fluid class.

The markup for above example:

Making thumbnail images responsive

If you have a gallery of images with thumbnails then Bootstrap 4 has a specific class for this as well. Use the .img-thumbnail class that not only makes the thumbnail image responsive but also adds one pixel border radius around thumbnails.

See the following demo where I used four thumbnail images with .img-thumbnail class. Again, resize the screen for seeing how these adjust with the screen width and height along with round borders:

See online demo and code

The markup:

Aligning images towards left and right example

Use the .float-left and .float-left classes for aligning images towards the left and right of the parent element.

See this example where I used these classes in the <img> tag inside the parent div with container class.

In the wider screen, the images are aligned left and right. As the screen gets smaller (in smart phones), the images will adjust accordingly. Have a look:

See online demo and code

Note: You may also use the text alignment classes e.g. .text-center for aligning images.

How to make images circular?

You may use the .rounded-circle class in the <img> tag for making images look rounded. If you add .img-thumbnail with .rounded-circle then the image is displayed with thin border line as well.

The example below shows making image circular with and without border lining:

See online demo and code

The markup:

You can see, the left image is displayed as a circle with a thin border line. The right image is only given the .rounded-circle class along with .float-right.

The rounded edges of thumbnails example

Make image edges rounded by using the .rounded class of Bootstrap 4. Unlike the rounded-circle, it makes only edges rounded:

See online demo and code

The markup:

Get the complete code and see the live demo on the example page.