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 sm devices, the third image jump to a new line. I would like that in that case the three images were responsive, but something is not working. My HTML code:

<div class="row">
    <div id="small-img" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 center">
            <img src="img/img1.jpg" class="img-responsive inline-block" alt="Responsive image"/>
            <img src="img/img2.jpg" class="img-responsive inline-block" alt="Responsive image"/>
            <img src="img/img3.jpg" class="img-responsive inline-block" alt="Responsive image"/>
    </div>
</div>

CSS:

.inline-block{ display: inline-block; }
.center{ text-align: center; }

Any suggestion please?

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;
}

<div class="row">
  <div id="small-img" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 center">
    <ul>
      <li>
        <img src="http://placehold.it/150x100" class="img-responsive inline-block" alt="Responsive image" />
      </li>
      <li>
        <img src="http://placehold.it/150x100" class="img-responsive inline-block" alt="Responsive image" />
      </li>
      <li>
        <img src="http://placehold.it/150x100" class="img-responsive inline-block" alt="Responsive image" />
      </li>
    </ul>
  </div>
</div>

Answer 2

I would rather go for width:100% instead of class="img-responsive"