title: Bootstrap 4 images thumbnail classes
body: <p>I got a HTML code in the following using bootstrap 3.3.7, 
  using thumbnail class the images can be resized and fit into the grid perfectly. </p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
   &lt;html lang="en"&gt;
   &lt;head&gt;
     &lt;meta charset="utf-8"&gt;
     &lt;title&gt;Project&lt;/title&gt;
     &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
   &lt;/head&gt;
  
  &lt;div class="container"&gt;
    &lt;h2&gt;Pictures of Coffee&lt;/h2&gt;
    &lt;div class="row"&gt;
   &lt;div class="col-lg-4 col-xs-6 thumbnail"&gt;&lt;img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""&gt;&lt;/div&gt;
      &lt;div class="col-lg-4 col-xs-6 thumbnail"&gt;&lt;img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""&gt;&lt;/div&gt;
      &lt;div class="col-lg-4 col-xs-6 thumbnail"&gt;&lt;img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""&gt;&lt;/div&gt;
      &lt;div class="col-lg-4 col-xs-6 thumbnail"&gt;&lt;img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""&gt;&lt;/div&gt;
      &lt;div class="col-lg-4 col-xs-6 thumbnail"&gt;&lt;img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""&gt;&lt;/div&gt;
      &lt;div class="col-lg-4 col-xs-6 thumbnail"&gt;&lt;img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""&gt;&lt;/div&gt; 
    &lt;/div&gt;
  &lt;/div&gt;
  
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>However, the thumbnail class doesn't seem to be exist in bootstrap 4.0
  <a href="https://getbootstrap.com/docs/4.0/layout/grid/" rel="noreferrer">https://getbootstrap.com/docs/4.0/layout/grid/</a>
  To simulate the issue you can try to replace the html link rel with the following</p>
  
  <pre><code> &lt;link rel="stylesheet"
   href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
   integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
   crossorigin="anonymous"&gt;
  </code></pre>
  
  <p>You can see the images will be out of places and I would like to know what is the similar class to achieve the same result in 4.0. Or i have to resort to bootstrap 3.3.7 ?</p>