title: Thumbnail gallery in Bootstrap 4
body: <p>I was wondering how to create following thumbnail layout in lg in Bootstrap 4:</p>
  
  <p><a href="https://i.stack.imgur.com/A68bd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A68bd.jpg" alt="wireframe of layout"></a></p>
  
  <p>I have the following code from this template (<a href="https://startbootstrap.com/template-overviews/thumbnail-gallery/" rel="nofollow noreferrer">https://startbootstrap.com/template-overviews/thumbnail-gallery/</a>) :</p>
  
  <pre><code>&lt;div class="col-lg-6 col-md-4 col-xs-6"&gt;
  &lt;a href=“link” class="d-block mb-4 h-100"&gt;
  &lt;img class="img-fluid img-thumbnail" src=“image1.jpg" alt=""&gt;
        &lt;/a&gt;
  
  &lt;div class="col-lg-3 col-md-4 col-xs-6"&gt;
  &lt;a href=“link” class="d-block mb-4 h-100"&gt;
  &lt;img class="img-fluid img-thumbnail" src=“image2.jpg" alt=""&gt;
        &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="col-lg-3 col-md-4 col-xs-6"&gt;
  &lt;a href=“link” class="d-block mb-4 h-100"&gt;
  &lt;img class="img-fluid img-thumbnail" src=“image3.jpg" alt=""&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="col-lg-3 col-md-4 col-xs-6"&gt;
  &lt;a href=“link” class="d-block mb-4 h-100"&gt;
  &lt;img class="img-fluid img-thumbnail" src=“image4.jpg" alt=""&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="col-lg-3 col-md-4 col-xs-6"&gt;
  &lt;a href=“link” class="d-block mb-4 h-100"&gt;
  &lt;img class="img-fluid img-thumbnail" src=“image5.jpg" alt=""&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem I am having is the last 2 divs appear under the larger div, which makes sense because of the 12 column grid system. When I place another lg-6 div under the current one there is too much space between the top two smaller thumbnails and the bottom two thumbnails. Same thing happens when I add a line break after the first two smaller thumbnails. </p>
  
  <p>Thanks,</p>