How to make use of it:

1. Load the required sources within the HTML file.

<!-- Bootstrap -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
<!-- Font Awesome 5 -->
<link rel="stylesheet" href="/path/to/font-awesome/all.min.css" />

2. Load the Bootstrap Gallery plugin’s information.

<link rel="stylesheet" href="./minified/bootstrap-gallery.min.css" />
<script src="./minified/bootstrap-gallery.min.js"></script>

3. Add the CSS class thumbnail to image links.

<a href="1.jpg" class="thumbnail">
  <img src="1.jpg" alt="Alt 1" />
</a>

<a href="2.jpg" class="thumbnail">
  <img src="2.jpg" alt="Alt 2" />
</a>

<a href="3.jpg" class="thumbnail">
  <img src="3.jpg" alt="Alt 3" />
</a>

...

4. Group your image collections utilizing the data-gallery attribute on the web page.

<a href="1.jpg" class="thumbnail" data-gallery="gallery1">
  <img src="1.jpg" alt="Alt 1" />
</a>

<a href="2.jpg" class="thumbnail" data-gallery="gallery1">
  <img src="2.jpg" alt="Alt 2" />
</a>

<a href="3.jpg" class="thumbnail" data-gallery="gallery2">
  <img src="3.jpg" alt="Alt 3" />
</a>

<a href="4.jpg" class="thumbnail" data-gallery="gallery2">
  <img src="4.jpg" alt="Alt 4" />
</a>

5. It additionally helps with plain text links.

<a href="1.jpg" class="show-gallery">
  Text Link 1
</a>

<a href="2.jpg" class="show-gallery">
  Text Link 2
</a>

<a href="3.jpg" class="show-gallery">
  Text Link 3
</a>

...

6. An {custom} selectors:

<a href="1.jpg" class="custom-selector">
  Text Link 1
</a>

$(function(){
  bootstrapGallery('a.custom-selector');
});