→ Anonymous
→ Bootstrap Image Gallery

Bootstrap Image Gallery

This bootstrap css example is contributed by Anonymous, on 05-Apr-2024. Component is made with bootstrap css v.3.4. It is responsive. similar terms for this example is Masonry

Tags: Gallery Grid

Author Anonymous

3.4k

v.3.4

Fork Fullscreen

<link rel="stylesheet" href="https://rawgit.com/LeshikJanz/libraries/master/Bootstrap/baguetteBox.min.css">

<div class="container gallery-container">

<h1>Bootstrap 3 Gallery</h1>

<p class="page-description text-center">Fluid Layout With Overlay Effect</p>

<div class="tz-gallery">

<div class="row">

<div class="col-sm-12 col-md-4">
                <a class="lightbox"
                    href="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg">
                    <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" alt="Bridge">
                </a>
            </div>
            <div class="col-sm-6 col-md-4">
                <a class="lightbox"
                    href="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/park.jpg">
                    <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/park.jpg" alt="Park">
                </a>
            </div>
            <div class="col-sm-6 col-md-4">
                <a class="lightbox"
                    href="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/tunnel.jpg">
                    <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/tunnel.jpg" alt="Tunnel">
                </a>
            </div>
            <div class="col-sm-12 col-md-8">
                <a class="lightbox"
                    href="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/traffic.jpg">
                    <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/traffic.jpg" alt="Traffic">
                </a>
            </div>
            <div class="col-sm-6 col-md-4">
                <a class="lightbox"
                    href="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/rails.jpg">
                    <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/rails.jpg" alt="Coast">
                </a>
            </div>
            <div class="col-sm-6 col-md-4">
                <a class="lightbox"
                    href="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/coast.jpg">
                    <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/coast.jpg" alt="Rails">
                </a>
            </div>

</div>

</div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.js"></script>

<script>
    baguetteBox.run('.tz-gallery');
</script>

More Examples

Bento Grid Layout with Images

Author:
Juan Martinez

1 year ago

2.7k

v.5.3
Gallery #1

Author:
java stories story

5 days ago

119

v.5.3
Bootstrap 5 Image Gallery

Author:
Anonymous

1 year ago

8.5k

v.5.3
Products Grid
E-commerce product grid

Author:
Juan Martinez

1 year ago

3.2k

v.5.3
Bento grid bootstrap

Author:
Anonymous

7 months ago

1.1k

v.5.3
Card Layout
Using masonry in cards layout

Author:
almounkez

7 months ago

2.7k

v.5.3
Responsive Card Grid
A responsive grid of cards with hover effects

Author:
Prajwal Hallale

1 year ago

3.6k

v.5.3
Responsive Products Grid

Author:
Ross Wille

1 year ago

2.4k

v.5.3
Card grid
card grid for blog articles etc. it also has author's details

Author:
Anonymous

1 year ago

1.4k

v.4.6
Blog Post Grid
Responsive blog post grid

Author:
Kemaya m

1 year ago

1.6k

v.5.3
Blurry Loading
Blurry Loading

Author:
Rami AlAjo

5 months ago

1.3k

v.4.6
Image gallery in bootstrap
Responsive Image gallery

Author:
Mateo Rojas

7 months ago

3.1k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent

BootstrapExamples From the makers of tailwindflex.com

BootstrapExamples is a free library offering a diverse range of Bootstrap CSS components. Developed by the community, it's open for anyone to use.

Contacts

Email:

[email protected]

Links

Search

Resources

Free Tailwind CSS Components Free CSS Components

© 2025 BootstrapExamples. All Rights Reserved.

v1.3