Gallery #1

This bootstrap css example is contributed by java stories story, on 01-Aug-2025. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is Masonry

Tags: Gallery

Author java stories story

736

v.5.3

Fork Fullscreen

<section id="gallery" class="py-5">
    <div class="container">
        <h2 class="text-center mb-5">Galeri Kami</h2>
        <div class="row g-4">
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="card shadow-sm">
                    <img src="https://images.pexels.com/photos/30877151/pexels-photo-30877151.jpeg" class="img-fluid rounded" alt="Deskripsi Gambar 1">
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="card shadow-sm">
                    <img src="https://images.pexels.com/photos/30877151/pexels-photo-30877151.jpeg" class="img-fluid rounded" alt="Deskripsi Gambar 2">
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="card shadow-sm">
                    <img src="https://images.pexels.com/photos/30877151/pexels-photo-30877151.jpeg" class="img-fluid rounded" alt="Deskripsi Gambar 3">
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="card shadow-sm">
                    <img src="https://images.pexels.com/photos/30877151/pexels-photo-30877151.jpeg" class="img-fluid rounded" alt="Deskripsi Gambar 4">
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="card shadow-sm">
                    <img src="https://images.pexels.com/photos/30877151/pexels-photo-30877151.jpeg" class="img-fluid rounded" alt="Deskripsi Gambar 5">
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="card shadow-sm">
                    <img src="https://images.pexels.com/photos/30877151/pexels-photo-30877151.jpeg" class="img-fluid rounded" alt="Deskripsi Gambar 6">
                </div>
            </div>
        </div>
    </div>
</section>

More Examples

Bootstrap Image Gallery

Author:
Anonymous

1 year ago

4k

v.3.4
Bootstrap 5 Image Gallery

Author:
Anonymous

1 year ago

9.9k

v.5.3
Card Layout
Using masonry in cards layout

Author:
almounkez

8 months ago

3k

v.5.3
Responsive image galary with tabs

Author:
Arturo

8 months ago

4.9k

v.5.3
Image slider
Image slider with auto-scrolling and with title and description

Author:
Anonymous

1 year ago

4.6k

v.5.3
Image gallery in bootstrap
Responsive Image gallery

Author:
Mateo Rojas

8 months ago

3.5k

v.5.3
Parallax Image Gallery
An eye-catching gallery section with parallax scrolling effects and image captions.

Author:
Prajwal Hallale

1 year ago

4.8k

v.5.3
Gllery with Hover Effect

Author:
java stories story

2 weeks ago

242

v.5.3
Blurry Loading
Blurry Loading

Author:
Rami AlAjo

6 months ago

1.5k

v.4.6
Scroll Animation
Scroll Animation

Author:
Rami AlAjo

6 months ago

1.9k

v.4.6
Elegant Profile Card
showcasing user or team member profiles in a professional and visually appealing manner. The profile card includes an avatar, name, position, and a short bio, along with social media icons for easy connectivity

Author:
Prajwal Hallale

1 year ago

7.2k

v.5.3
Responsive Products Grid

Author:
Ross Wille

1 year ago

2.8k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent