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

529

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