Utilities Bootstrap 5Free
Image Gallery: a hand-crafted, open-source Bootstrap 5 utility. HTML included, ready to copy.
2.0k views526 downloads
gosnippets.com/preview/image-gallery
Source Code
1<div class="container py-5">
2 <h2 class="fw-bold text-center mb-5">Photo Gallery</h2>
3 <div class="row g-3">
4 <div class="col-md-4">
5 <div class="position-relative overflow-hidden rounded-3" style="aspect-ratio:1;">
6 <img src="https://picsum.photos/seed/g1/400/400" class="w-100 h-100 object-fit-cover" alt="Gallery 1">
7 <div class="position-absolute inset-0 d-flex align-items-center justify-content-center opacity-0 transition-all bg-dark bg-opacity-50 rounded-3" style="top:0;left:0;right:0;bottom:0;transition:opacity .3s;" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0">
8 <span class="text-white fw-semibold">View</span>
9 </div>
10 </div>
11 </div>
12 <div class="col-md-4">
13 <div class="position-relative overflow-hidden rounded-3" style="aspect-ratio:1;">
14 <img src="https://picsum.photos/seed/g2/400/400" class="w-100 h-100 object-fit-cover" alt="Gallery 2">
15 </div>
16 </div>
17 <div class="col-md-4">
18 <div class="position-relative overflow-hidden rounded-3" style="aspect-ratio:1;">
19 <img src="https://picsum.photos/seed/g3/400/400" class="w-100 h-100 object-fit-cover" alt="Gallery 3">
20 </div>
21 </div>
22 <div class="col-md-6">
23 <div class="position-relative overflow-hidden rounded-3" style="aspect-ratio:16/9;">
24 <img src="https://picsum.photos/seed/g4/800/450" class="w-100 h-100 object-fit-cover" alt="Gallery 4">
25 </div>
26 </div>
27 <div class="col-md-6">
28 <div class="position-relative overflow-hidden rounded-3" style="aspect-ratio:16/9;">
29 <img src="https://picsum.photos/seed/g5/800/450" class="w-100 h-100 object-fit-cover" alt="Gallery 5">
30 </div>
31 </div>
32 </div>
33</div>More Utilities snippets
Auto move mouse cursor snippet
Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
UtilitiesView →
Bootstrap 5 Ecommerce Product Detail Page Design snippet
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
UtilitiesView →
Bootstrap 5 Ecommerce single product page design template
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
UtilitiesView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.