Portfolio images not resizing using bootstrap

Hello, I am having trouble with images resizing using bootstrap.

Here is my Codepen . Note: I have included the red borders to get a visualization of where each html object is.

I want all three portofolio images to be neatly side be side in a row, and resize when i resize the screen. But for some reason my bootstrap classes are not resizing properly.

Would anyone be able to give me some advice on how to correctly resize these images?

You could create a class:

.myclass {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;

and apply that to your images:

      <div class="col-sm-4 test"> 
      	  <img src="http://gdurl.com/QdxC" class="img-responsive myclass">

I think that would do what you need.

Thanks for the response ksjazzguitar.

Unfortunately, when I do this, it doesn’t resize the images to fit the screen, and it actually allows the images to spill over the borders of the div.

I think there is something in my higher up css properties that is messing with my lower level css code but I have no idea what it could be even after playing around.

You are using bootstrap version 4. The class for responsive image is img-fluid.
So replace img-responsive with img-fluid and it will work.


That worked! Thanks Draghiciuo!

thanks so much for the magic.