→ Arturo
→ Responsive image galary with tabs

Responsive image galary with tabs

This bootstrap css example is contributed by Arturo, on 22-Dec-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is Masonry

Tags: Gallery Tabs

Author Arturo

7.3k

v.5.3

Fork Fullscreen

<div class="container py-5">
    <h2 class="text-center mb-4">Image Gallery</h2>

<div class="tab-navigation justify-content-center">
        <button class="tab-btn active" data-tab="nature">Nature</button>
        <button class="tab-btn" data-tab="architecture">Architecture</button>
        <button class="tab-btn" data-tab="interior">Interior</button>
    </div>

<div class="tab-content active" id="nature">
        <div class="grid-container">
            <div class="grid-item">
                <img src="https://images.unsplash.com/photo-1426604966848-d7adac402bff" alt="Mountain lake">
                <div class="image-overlay">
                    <h5>Mountain Lake</h5>
                    <p class="mb-0">Pristine waters reflecting nature's beauty</p>
                </div>
            </div>
            <div class="grid-item">
                <img src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e" alt="Forest">
                <div class="image-overlay">
                    <h5>Mystic Forest</h5>
                    <p class="mb-0">Sunlight piercing through the trees</p>
                </div>
            </div>
            <div class="grid-item">
                <img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05" alt="Mountains">
                <div class="image-overlay">
                    <h5>Mountain Range</h5>
                    <p class="mb-0">Majestic peaks touching the clouds</p>
                </div>
            </div>
        </div>
    </div>

<div class="tab-content" id="architecture">
        <div class="grid-container">
            <div class="grid-item">
                <img src="https://images.unsplash.com/photo-1511818966892-d7d671e672a2" alt="Modern Building">
                <div class="image-overlay">
                    <h5>Modern Architecture</h5>
                    <p class="mb-0">Contemporary design meets functionality</p>
                </div>
            </div>
            <div class="grid-item">
                <img src="https://images.unsplash.com/photo-1488972685288-c3fd157d7c7a" alt="City Architecture">
                <div class="image-overlay">
                    <h5>Urban Landscape</h5>
                    <p class="mb-0">City skyline at twilight</p>
                </div>
            </div>
            <div class="grid-item">
                <img src="https://images.unsplash.com/photo-1479839672679-a46483c0e7c8" alt="Historic Building">
                <div class="image-overlay">
                    <h5>Historic Architecture</h5>
                    <p class="mb-0">Classical design elements</p>
                </div>
            </div>
        </div>
    </div>

<div class="tab-content" id="interior">
        <div class="grid-container">
            <div class="grid-item">
                <img src="https://images.unsplash.com/photo-1618221195710-dd6b41faaea6" alt="Modern Interior">
                <div class="image-overlay">
                    <h5>Modern Living</h5>
                    <p class="mb-0">Contemporary interior design</p>
                </div>
            </div>
            <div class="grid-item">
                <img src="https://images.unsplash.com/photo-1616486338812-3dadae4b4ace" alt="Minimalist Room">
                <div class="image-overlay">
                    <h5>Minimalist Design</h5>
                    <p class="mb-0">Clean lines and simple elegance</p>
                </div>
            </div>
            <div class="grid-item">
                <img src="https://images.unsplash.com/photo-1616137466211-f939a420be84" alt="Cozy Space">
                <div class="image-overlay">
                    <h5>Cozy Corner</h5>
                    <p class="mb-0">Warm and inviting interior</p>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples