→ 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

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

Tabs example
Beautiful custom tabs example with Bootstrap 5

Author:
Omar Khaled

3 months ago

237

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

Author:
Anonymous

3 months ago

200

v.5.3
Bootstrap 5 Image Gallery

Author:
Anonymous

5 months ago

557

v.5.3
Underlined Tabs with bootstrap 5
Minimal design with underline indicator it has Smooth transitions

Author:
Prajwal Hallale

1 week ago

35

v.5.3
Bootstrap tabs
tab navigation

Author:
Anonymous

8 months ago

512

v.5.3
Bootstrap Tabs with Gradient

Author:
Prajwal Hallale

1 week ago

25

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

Author:
Prajwal Hallale

9 months ago

586

v.5.3
Bootstrap Image Gallery

Author:
Anonymous

8 months ago

410

v.3.4
Image gallery in bootstrap
Responsive Image gallery

Author:
Mateo Rojas

5 days ago

51

v.5.3
Bootstrap tabs filled
Clean, modern design with a filled background

Author:
Prajwal Hallale

1 week ago

27

v.5.3
Bootstrap tabs filled
Clean, modern design with a filled background

Author:
Prajwal Hallale

1 week ago

28

v.5.3
Coming Soon Page
Coming Soon Landing page

Author:
Juan Martinez

5 months ago

244

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent