title: Different size images adjust on one another in html css bootstrap
body: <p>I want to create a page like this "<a href="https://imgur.com/a/PS0U15Q" rel="nofollow noreferrer">https://imgur.com/a/PS0U15Q</a>". Currently I got this "<a href="https://imgur.com/a/Qqq9Ebk" rel="nofollow noreferrer">https://imgur.com/a/Qqq9Ebk</a>". But in this approach I cant get the result as I want. </p>
  
  <p>I want: <a href="https://imgur.com/a/PS0U15Q" rel="nofollow noreferrer">https://imgur.com/a/PS0U15Q</a>
  Current: <a href="https://imgur.com/a/Qqq9Ebk" rel="nofollow noreferrer">https://imgur.com/a/Qqq9Ebk</a></p>
  
  <p>I have tried this code Currently.</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>#box-image-div{
    /* Prevent vertical gaps */
    line-height: 0;
  
    -webkit-column-count: 20;
    -webkit-column-gap:   0px;
    -moz-column-count:    20;
    -moz-column-gap:      0px;
    column-count:         20;
    column-gap:           0px;  
  }
  
  #box-image-div img {
    /* Just in case there are inline attributes */
    width: 100% !important;
    height: auto !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="box-image-div"&gt;
      &lt;img class="box-image" src="http://sty1.stallyons.com/advertising/wp-content/uploads/2018/09/112.png"&gt;
      &lt;img class="box-image" src="http://sty1.stallyons.com/advertising/wp-content/uploads/2018/09/118.png"&gt;
      &lt;img class="box-image" src="http://sty1.stallyons.com/advertising/wp-content/uploads/2018/09/113.png"&gt;
      &lt;img class="box-image" src="http://sty1.stallyons.com/advertising/wp-content/uploads/2018/09/115.png"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>