title: Make images the same size in bootstrap grid
body: <p>I am creating an image gallery with 3 rows, each containing 3 images by using the Bootstrap grid system. All of the images have different size. What I am trying to do is make all of the images the same size.
  I tried to use the max-height or max-width in my CSS, however it didn't help to make all the images (thumbnails) similar size.
  Should I just get rid of the thumbnail class or is there any other solution?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
        padding-top: 70px;}
      .row .flex {
       display: inline-flex;
       width: 100%;}
      img {
       width:100%;
       min-height:100px;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="row match-to-row"&gt;
        &lt;div class="col-lg-4 col-sm-6"&gt;
          &lt;div class="thumbnail"&gt;
             &lt;img src="https://source.unsplash.com/eKTUtA74uN0" alt=""&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-4 col-sm-6"&gt;
          &lt;div class="thumbnail"&gt;
             &lt;img src="https://source.unsplash.com/x-tbVqkfQCU" alt=""&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-4 col-sm-6"&gt;
          &lt;div class="thumbnail"&gt;
             &lt;img src="https://source.unsplash.com/cjpGSEkXfwM" alt=""&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="row match-to-row"&gt;
          &lt;div class="col-lg-4 col-sm-6"&gt;
            &lt;div class="thumbnail"&gt;
  
              &lt;img src="https://source.unsplash.com/63JKK67yGUE" alt=""&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-4 col-sm-6"&gt;
            &lt;div class="thumbnail"&gt;
  
              &lt;img src="https://source.unsplash.com/YP6lDrlxWYQ" alt=""&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-4 col-sm-6"&gt;
            &lt;div class="thumbnail"&gt;
  
              &lt;img src="https://source.unsplash.com/NqE8Ral8eCE" alt=""&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row flex match-to-row"&gt;
            &lt;div class="col-lg-4 col-sm-6"&gt;
              &lt;div class="thumbnail"&gt;
  
                &lt;img src="https://source.unsplash.com/6oUsyeYXgTg" alt=""&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-lg-4 col-sm-6"&gt;
              &lt;div class="thumbnail"&gt;
  
                &lt;img src="https://source.unsplash.com/WF2lvywxdMM" alt=""&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-lg-4 col-sm-6"&gt;
              &lt;div class="thumbnail"&gt;
  
                &lt;img src="https://source.unsplash.com/2FdIvx7sy3U" alt=""&gt;
              &lt;/div&gt;
            &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>