Thumbnail gallery in Bootstrap 4

user_7970192 0
Viewed 2507

I was wondering how to create following thumbnail layout in lg in Bootstrap 4:

wireframe of layout

I have the following code from this template (https://startbootstrap.com/template-overviews/thumbnail-gallery/) :

<div class="col-lg-6 col-md-4 col-xs-6">
<a href=“link” class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src=“image1.jpg" alt="">
      </a>

<div class="col-lg-3 col-md-4 col-xs-6">
<a href=“link” class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src=“image2.jpg" alt="">
      </a>
</div>

<div class="col-lg-3 col-md-4 col-xs-6">
<a href=“link” class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src=“image3.jpg" alt="">
</a>
</div>

<div class="col-lg-3 col-md-4 col-xs-6">
<a href=“link” class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src=“image4.jpg" alt="">
</a>
</div>

<div class="col-lg-3 col-md-4 col-xs-6">
<a href=“link” class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src=“image5.jpg" alt="">
</a>
</div>

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.

Thanks,

bootstrap-4 twitter-bootstrap
1 Answers

The StartBootstrap example is only designed to show images that are the same size (like this). Now that Bootstrap 4 is flexbox, the rows will be the same height, so the last 2 images in your uneven grid scenario will be wrapped to the next row.

One "workaround" is to disable the flexbox on md and use floats instead...

<div class="container py-4">
    <div class="row d-md-block">
        <div class="col-md-6 float-md-left">
            <a href="link" class="d-block h-100">
                <img class="img-fluid" src="//placehold.it/600" alt="">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-6 pb-1 float-md-left">
            ..
        </div>
        <div class="col-lg-3 col-md-4 col-6 pb-1 float-md-left">
            ...
        </div>
        <div class="col-lg-3 col-md-4 col-6 pb-1 float-md-left">
            ..
        </div>
        <div class="col-lg-3 col-md-4 col-6 pb-1 float-md-left">
            ..
        </div>
    </div>
</div>

https://www.codeply.com/go/gG7VGlmvDC

Or, simply make 2 separate columns, 1 for large image, and 1 for a nested 4x4 grid.

<div class="container py-4">
    <div class="row">
        <div class="col-md-6">
            <a href="“link”" class="d-block h-100 mb-4">
                <img class="img-fluid" src="//placehold.it/600" alt="">
            </a>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-6">
                    ..
                </div>
                <div class="col-6">
                    ..
                </div>
                <div class="col-6">
                    ..
                </div>
                <div class="col-6">
                    ..
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/xrwLgBoK20

Note: There is no longer -xs in Bootstrap 4

user_1714560
Related