Original source from https://utsa-asc.github.io/college-dls/components/detail/gallery–default.html
This component is designed to display a collection of images and/or videos in a grid layout. The number of images or videos showing in a row will vary depending the device viewport width.
<div class="container">
<h2>Image Gallery</h2>
<div class="row">
<div class="col-12 col-sm-6 col-md-3 mb-4">
<a class="popup-gallery" title="This is the title 1" data-caption="This is the data caption 1" href="../../college-dls/college/images/hero-banner-1.png" aria-label="Two students talking next to a window">
<img alt="Two students talking next to a window" data-src="../../college-dls/college/images/hero-banner-1.png" data-srcset="../../college-dls/college/images/hero-banner-1.png" src="../../college-dls/college/images/hero-banner-1.png" />
</a>
</div>
<div class="col-12 col-sm-6 col-md-3 mb-4">
<a class="popup-gallery" title="This is the title 2" data-caption="This is the data caption 2" href="../../college-dls/college/images/hero-banner-2.png" aria-label="Engineering toys">
<img alt="Engineering toys" data-src="../../college-dls/college/images/hero-banner-2.png" data-srcset="../../college-dls/college/images/hero-banner-2.png" src="../../college-dls/college/images/hero-banner-2.png">
</a>
</div>
<div class="col-12 col-sm-6 col-md-3 mb-4 mb-sm-0">
<a class="popup-gallery" title="This is the title 3" data-caption="This is the data caption 3" href="../../college-dls/college/images/hero-banner-3.png" aria-label="A student writing while examining an item in a lab">
<img alt="A student writing while examining an item in a lab" data-src="../../college-dls/college/images/hero-banner-3.png" data-srcset="../../college-dls/college/images/hero-banner-3.png" src="../../college-dls/college/images/hero-banner-3.png">
</a>
</div>
<div class="col-12 col-sm-6 col-md-3 mb-0">
<a class="popup-gallery" title="This is the title 4" data-caption="This is the data caption 4" href="../../college-dls/college/images/hero-banner-4.png" aria-label="A student holding an item">
<img alt="A student holding an item" data-src="../../college-dls/college/images/hero-banner-4.png" data-srcset="../../college-dls/college/images/hero-banner-4.png" src="../../college-dls/college/images/hero-banner-4.png">
</a>
</div>
</div>
<div class="row pt-4">
<div class="col-12 col-sm-6 col-md-3 mb-4">
<a class="popup-gallery" title="This is the title 5" data-caption="This is the data caption 5" href="../../college-dls/college/images/hero-banner-5.png" aria-label="Three student posing for the camera">
<img alt="Three student posing for the camera" data-src="../../college-dls/college/images/hero-banner-5.png" data-srcset="../../college-dls/college/images/hero-banner-5.png" src="../../college-dls/college/images/hero-banner-5.png">
</a>
</div>
<div class="col-12 col-sm-6 col-md-3 mb-4">
<a class="popup-gallery" title="This is the title 6" data-caption="This is the data caption 6" href="../../college-dls/college/images/hero-banner-6.png" aria-label="Group of students in caps and gowns posing on stairs">
<img alt="Group of students in caps and gowns posing on stairs" data-src="../../college-dls/college/images/hero-banner-6.png" data-srcset="../../college-dls/college/images/hero-banner-6.png" src="../../college-dls/college/images/hero-banner-6.png">
</a>
</div>
<div class="col-12 col-sm-6 col-md-3 mb-4 mb-sm-0">
<a class="popup-gallery" title="This is the title 7" data-caption="This is the data caption 7" href="../../college-dls/college/images/hero-banner-7.png" aria-label="Graduating student giving a thumbs up at ceremony">
<img alt="Graduating student giving a thumbs up at ceremony" data-src="../../college-dls/college/images/hero-banner-7.png" data-srcset="../../college-dls/college/images/hero-banner-7.png" src="../../college-dls/college/images/hero-banner-7.png">
</a>
</div>
<div class="col-12 col-sm-6 col-md-3 mb-0">
<a class="popup-gallery" title="This is the title 8" data-caption="This is the data caption 8" href="../../college-dls/college/images/hero-banner-8.png" aria-label="Group of four students walking and talking">
<img alt="Group of four students walking and talking" data-src="../../college-dls/college/images/hero-banner-8.png" data-srcset="../../college-dls/college/images/hero-banner-8.png" src="../../college-dls/college/images/hero-banner-8.png">
</a>
</div>
</div>
</div>
/* components/03-sections/09-gallery/gallery.scss */
/* BEGIN gallery.scss */
.col-md-3.video {
position: relative;
}
.fa.fa-play {
position: absolute;
width: 0;
height: 0;
background-color: rgba(0,0,0,0.6);
border-radius: 500px;
padding: 15px 20px;
color: #fff;
font-size: 2em;
margin: 0 auto;
width: 60px;
height: 60px;
top: 25%;
left: 40%;
}
/* END gallery.scss */
<div class="container">
<h2>{{ header.text }}</h2>
<div class="row">
<div class="col-12 col-sm-6 col-md-3 mb-4">
<a class="popup-gallery" title="This is the title 1" data-caption="This is the data caption 1" href="{{ path images.image1 }}" aria-label="Two students talking next to a window">
<img alt="Two students talking next to a window" data-src="{{ path images.image1 }}" data-srcset="{{ path images.image1 }}" src="{{ path images.image1 }}" />
</a>
</div>
<div class="col-12 col-sm-6 col-md-3 mb-4">
<a class="popup-gallery" title="This is the title 2" data-caption="This is the data caption 2" href="{{ path images.image2 }}" aria-label="Engineering toys">
<img alt="Engineering toys" data-src="{{ path images.image2 }}" data-srcset="{{ path images.image2 }}" src="{{ path images.image2 }}">
</a>
</div>
<div class="col-12 col-sm-6 col-md-3 mb-4 mb-sm-0">
<a class="popup-gallery" title="This is the title 3" data-caption="This is the data caption 3" href="{{ path images.image3 }}" aria-label="A student writing while examining an item in a lab">
<img alt="A student writing while examining an item in a lab" data-src="{{ path images.image3 }}" data-srcset="{{ path images.image3 }}" src="{{ path images.image3 }}">
</a>
</div>
<div class="col-12 col-sm-6 col-md-3 mb-0">
<a class="popup-gallery" title="This is the title 4" data-caption="This is the data caption 4" href="{{ path images.image4 }}" aria-label="A student holding an item">
<img alt="A student holding an item" data-src="{{ path images.image4 }}" data-srcset="{{ path images.image4 }}" src="{{ path images.image4 }}">
</a>
</div>
</div>
<div class="row pt-4">
<div class="col-12 col-sm-6 col-md-3 mb-4">
<a class="popup-gallery" title="This is the title 5" data-caption="This is the data caption 5" href="{{ path images.image5 }}" aria-label="Three student posing for the camera">
<img alt="Three student posing for the camera" data-src="{{ path images.image5 }}" data-srcset="{{ path images.image5 }}" src="{{ path images.image5 }}">
</a>
</div>
<div class="col-12 col-sm-6 col-md-3 mb-4">
<a class="popup-gallery" title="This is the title 6" data-caption="This is the data caption 6" href="{{ path images.image6 }}" aria-label="Group of students in caps and gowns posing on stairs">
<img alt="Group of students in caps and gowns posing on stairs" data-src="{{ path images.image6 }}" data-srcset="{{ path images.image6 }}" src="{{ path images.image6 }}">
</a>
</div>
<div class="col-12 col-sm-6 col-md-3 mb-4 mb-sm-0">
<a class="popup-gallery" title="This is the title 7" data-caption="This is the data caption 7" href="{{ path images.image7 }}" aria-label="Graduating student giving a thumbs up at ceremony">
<img alt="Graduating student giving a thumbs up at ceremony" data-src="{{ path images.image7 }}" data-srcset="{{ path images.image7 }}" src="{{ path images.image7 }}">
</a>
</div>
<div class="col-12 col-sm-6 col-md-3 mb-0">
<a class="popup-gallery" title="This is the title 8" data-caption="This is the data caption 8" href="{{ path images.image8 }}" aria-label="Group of four students walking and talking">
<img alt="Group of four students walking and talking" data-src="{{ path images.image8 }}" data-srcset="{{ path images.image8 }}" src="{{ path images.image8 }}">
</a>
</div>
</div>
</div>