Images stay on the same row after resize in bootstrap?

Question

I have added a 11 images inside panel body and made them to stay in-line with CSS: .img-responsive{display: inline-block;} So far so good. After I resize the page they are going one under another and thats not my goal. I would like them to stay on the same row after the page risize. This will probably have something with the image sizes.

If someone can tell me how can I resize an image to stay in the same line even after resize will be great!

Here is the code:

.img-responsive {
  display: inline-block;
}

<div class="col-xs-8 col-sm-6 col-lg-8">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">My images</h3>
    </div>
    <div class="panel-body">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
    </div>
  </div>
</div>

Answer 1

There are many solutions for this, in addition to Pevara's solution:

Using viewport units

With media queries, you can assign the image width according to the view port width. Adjust the units to your preference.

.img-responsive {
  display: inline-block !important; /* important added for SO snippet -- Avoid it! */
}

@media (max-width: 768px) {
  .panel-body img {
    width: 2vw;
    height: 2vw;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .panel-body img {
    width: 3vw;
    height: 3vw;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-xs-8 col-sm-6 col-lg-8">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">My images</h3>
    </div>
    <div class="panel-body">
      <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image">
      <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image">
      <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image">
      <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image">
      <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image">
      <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image">
      <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image">
      <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image">
      <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image">
      <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image">
      <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image">
    </div>
  </div>
</div>

---

Using Flexbox

Set the flex container to be the parent of images. Default value of flex-flow is row nowrap so it will prevent a new line of images.

.panel-body {
  display: flex;
  justify-content: space-between;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-xs-8 col-sm-6 col-lg-8">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">My images</h3>
    </div>
    <div class="panel-body">
      <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image">
      <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image">
      <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image">
      <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image">
      <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image">
      <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image">
      <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image">
      <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image">
      <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image">
      <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image">
      <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image">
    </div>
  </div>
</div>

Answer 2

Each image need an individual container that they can be sized into.

try like:

#img_container li {
  width: 33.3%;
  float: left;
}
.img-responsive{
  border: 0 none;
  display: inline-block;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

<div class="col-xs-8 col-sm-6 col-lg-8">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">My images</h3>
    </div>
    <div class="panel-body">
      <ul id="img_container">
        <li>
          <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
        </li>
        <li>
          <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
        </li>
        <li>
          <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
        </li>
        <li>
          <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
        </li>
        <li>
          <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
        </li>
        <li>
          <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
        </li>
        <li>
          <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
        </li>
        <li>
          <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
        </li>
        <li>
          <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
        </li>
        <li>
          <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
        </li>
        <li>
          <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 3

All img-responsive does by default is the following:

display: block;
max-width: 100%;
height: auto;

This makes sure the image never gets wider then it's parent, and the ratio remains in tact.

To make sure all you images go on one line, you have added the inline-block, but that will just allow images to appear on the same line, and won't limit their size. To make sure all 11 images stay on the same line you will have to do something like this:

max-width: calc(100%/11);

This ensures each image will be maximum 1/11th of it's parent's width.

Another thing to take into account is that for inline items whitespace is relevant. 11 images + whitespace will be more then 100% of the parent, so you will have to make sure there is no whitespace between the img tags in your html.

Have a look at the demo I set up: http://www.bootply.com/46tTVHAtYG