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


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="">


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="">


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.


Equal-width columns | Bootstrap Docs

Back to: Bootstrap Reference > Bootstrap Utility Classes