Images not resized based on Bootstrap column size

Question

My goal is to display 4 images per row. Code below: ```

``` And I expect too see images resized based on column style from Bootstrap, but what I'm getting are overlapping full images . Any clue what is going on?

Accepted Answer

Try adding this to your stylesheet:

```
img {
    width: 100%;
}
```

Update: As an alternative (as pointed out in this answer's comments by @JasonAller), you could add `class="img-responsive"` to each `img` element. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales nicely to the parent element. See the Bootstrap docs for more info.

update for bootstrap v4

The classname for bootstrap v4 is `img-fluid` Bootstrap v4 docs

Images not resized based on Bootstrap column size

Solution

Problem