Responsive images inline-block in a div with Bootstrap

Question

I am new in Bootstrap, I am trying to do this responsive: A div, with 3 images centered (images have display: inline-block propertie).

But when I start resizing, in

Answer 1

In the case of responsive images, the image(s) need an individual container that they can be sized into. In the example you have, there are three images in the one container, so they won't adapt individually to that single container. You could try something like:

.row li {
  width: 33.3%;
  float: left;
}

img {
  border: 0 none;
  display: inline-block;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}