Bootstrapped images render poorly

I have my codepen here: https://codepen.io/makamo66/pen/gOJrQQQ?editors=1100

There are a couple of problems with it. For starters, the right hand side of the images go on top of the right hand rwo-blocks instead of fitting inside of the blocks. Then secondly, the two images in the second row-block have space between them for normal viewports and overlap for smaller viewports.

I added margin-right:-48px; to my left-hand image and the gap between the images disappeared but it’s not really a good solution to use a negative margin.

  • Your row elements needs to be inside a container element.

  • It isn’t no-gutters in V5 it’s just g-0 (docs)

  • Give your images max-width: 100% or use the img-fluid class.

  • thumb_recipe is the image thumb_recipe img is not a selector for the image (that would be an image inside an image, which isn’t a thing).

  • If you really want the two images to remain side by side, they likely need a flex container.


Example, please fork the pen if you need the code, so I can delete it. Let me know when you are done with it.

Edit: delete the pen

Thanks lasjorg. That’s a much nicer solution than mine. I have forked the codepen and you can delete it. Right now I’m just working on adding a class to an image link in cakephp 5.