Images overflowing their container (Bootstrap)

Hello everyone,

I just started my adventure with Bootstrap, so please treat me as a beginner.

I am trying to place some images inside the div container and it seems like my images are overflowing their div. I looked this up on line and tested few options but none of these seem to work. I pasted my faulty code to codepen https://codepen.io/dorotex/pen/ExKYLev

I will really appreciate any help.

you should remove “mx-0 my-0 py-0 px-0” on container-fluid div

Not sure exactly what you’re looking for, but if you remove style="height: 500px;"
from

<div class="row mt-4 mx-20" style="height: 500px;">

you won’t have an undersized container.

It helps to think about how padding and margins affect the overall layout. If you set strict heights on both an image and its container, vertical padding settings in the container can cause problems.

That’s a good point, I don’t think I mentioned what I want to achieve. I was hoping to slightly reduce the size of all images. In flex box I’d probably set a fixed height on the container and 100% height on each image but here I am really confused…

@dorota.dys

img-fluid in bootstrap takes care of responsive image settings. If I’m not mistaken, bootstrap uses something like

.img-fluid {
    width: 100%;
    height: auto;
}

so I don’t think you need to set a width on your image. Not sure, though, so play around with it. Usually, to control the image width and height I use the div that the img is wrapped in to set the width. Doing that, you wouldn’t need to set a fixed height on the container.