Bootstrap image gallery

<div class="row mx-0" id="">
    <div class="col-lg-4 col-md-12 mb-4 mb-lg-0 px-2  ">
        <a class="lg-item" data-lg-size="1600-1067"
            data-src="img/img1.jpg">
            <img src="img/thumb1.jpg"
                class="w-100 shadow-1-strong mb-3" alt="Boat on Calm Water" />
        </a>
        <a class="lg-item" data-lg-size="1600-2400"
            data-src="img/img2.jpg">
            <img src="img/thumb2.jpg"
                class="w-100 shadow-1-strong " alt="Wintry Mountain Landscape" />
        </a>
    </div>
    <div class="col-lg-4 mb-4 mb-lg-0 px-2">
        <a class="lg-item" data-lg-size="1600-2398"
            data-src="img/img3.jpg">
            <img src="img/thumb3.jpg"
                class="w-100 shadow-1-strong mb-3" alt="Mountains in the Clouds" />
        </a>
        <a class="lg-item" data-lg-size="1600-1065"
            data-src="img/img4.jpg">
            <img src="img/thumb4.jpg"
                class=" w-100 shadow-1-strong" alt="Boat on Calm Water" />
        </a>
    </div>
</div>

const container = document.querySelector('#bootstrap-image-gallery');
window.lightGallery(container, {
    selector: '.lg-item',
    plugins: [
        lgZoom,
        lgThumbnail
    ],
});