Skip to content

Try our new Crash Courses!

Become a member using the button below to hide this banner and gain access to our new Crash Courses.

Images – Bootstrap

Summary

To make an image responsive in Bootstrap, add the img-fluid class to it, like this:

<img src="my-picture.jpg" class="img-fluid" alt="">

Details

The img-fluid class will make the image fit inside of its containing element, and will allow it to shrink in size when on smaller screens.

You can also add an img-thumbnail class to add a border around the image. It will look more like a photograph with this class applied to it.

<img src="my-picture.jpg" class="img-fluid img-thumbnail" alt="">

Exercises

Recreate the HTML code from the Demo section in your index.html file. You can use the provided placeholder image or add an image of your own to this folder.

References

Equal-width columns | Bootstrap Docs

Back to: Bootstrap Reference > Bootstrap Utility Classes