→ 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

6.9k

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

Card Layout
Using masonry in cards layout

Author:
almounkez

1 year ago

4k

v.5.3
Bootstrap tabs
tab navigation

Author:
Anonymous

7 months ago

1.2k

v.5.3
Gallery #1

Author:
java stories story

6 months ago

1.8k

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

Author:
Anonymous

1 year ago

6.3k

v.5.3
Scroll Animation
Scroll Animation

Author:
Rami AlAjo

11 months ago

3k

v.4.6
Blurry Loading
Blurry Loading

Author:
Rami AlAjo

11 months ago

2.1k

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

Author:
Prajwal Hallale

1 year ago

4k

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

Author:
Prajwal Hallale

1 year ago

6.9k

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

Author:
Anonymous

3 days ago

24

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

Author:
Prajwal Hallale

1 year ago

2k

v.5.3
Bootstrap Image Gallery

Author:
Anonymous

1 year ago

5.6k

v.3.4
Bootstrap Tabs with Gradient

Author:
Prajwal Hallale

1 year ago

2.3k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent