# Images overflowing their container (Bootstrap)

**URL:** <https://forum.freecodecamp.org/t/images-overflowing-their-container-bootstrap/413381>\
**Category:** General\
**Created:** [August 3, 2020, 11:01pm UTC](https://forum.freecodecamp.org/t/images-overflowing-their-container-bootstrap/413381 "2020-08-03T23:01:13Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![dorota.dys](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dorota.dys/32/135076_2.png) [@dorota.dys](https://forum.freecodecamp.org/u/dorota.dys)\
**Post date:** [August 3, 2020, 11:01pm UTC](https://forum.freecodecamp.org/t/images-overflowing-their-container-bootstrap/413381/1 "2020-08-03T23:01:13Z")

</div>

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](https://codepen.io/dorotex/pen/ExKYLev)

I will really appreciate any help.

---

<div class="post-metadata">

**Author:** ![aldhaneka](https://avatars.discourse-cdn.com/v4/letter/a/5f9b8f/32.png) [@aldhaneka](https://forum.freecodecamp.org/u/aldhaneka)\
**Post date:** [August 4, 2020, 12:21am UTC](https://forum.freecodecamp.org/t/images-overflowing-their-container-bootstrap/413381/2 "2020-08-04T00:21:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![willjw3](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/willjw3/32/196790_2.png) [@willjw3](https://forum.freecodecamp.org/u/willjw3)\
**Post date:** [August 4, 2020, 12:22am UTC](https://forum.freecodecamp.org/t/images-overflowing-their-container-bootstrap/413381/3 "2020-08-04T00:22:37Z")

</div>

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

```auto
<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.

---

<div class="post-metadata">

**Author:** ![dorota.dys](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dorota.dys/32/135076_2.png) [@dorota.dys](https://forum.freecodecamp.org/u/dorota.dys)\
**Post date:** [August 4, 2020, 12:41am UTC](https://forum.freecodecamp.org/t/images-overflowing-their-container-bootstrap/413381/4 "2020-08-04T00:41:37Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![willjw3](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/willjw3/32/196790_2.png) [@willjw3](https://forum.freecodecamp.org/u/willjw3)\
**Post date:** [August 4, 2020, 2:40am UTC](https://forum.freecodecamp.org/t/images-overflowing-their-container-bootstrap/413381/5 "2020-08-04T02:40:20Z")

</div>

@dorota.dys

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

```auto
.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.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:44pm UTC](https://forum.freecodecamp.org/t/images-overflowing-their-container-bootstrap/413381/6 "2021-06-01T18:44:55Z")

</div>

Closed on June 1, 2021, 6:44pm UTC