→ java stories story
→ Gallery caraousel

Gallery caraousel

This bootstrap css example is contributed by java stories story, on 29-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

1.7k

v.5.3

Fork Fullscreen

<section class="container py-5 my-5" id="gallery">
    <h2 class="text-center mb-5">Gallery</h2>

<div id="galleryCarousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <div class="d-flex justify-content-center">
                    <img src="https://images.pexels.com/photos/33507068/pexels-photo-33507068.jpeg" class="gallery-img rounded shadow" alt="Gallery 1">
                </div>
            </div>
            <div class="carousel-item">
                <div class="d-flex justify-content-center">
                    <img src="https://images.pexels.com/photos/33507068/pexels-photo-33507068.jpeg" class="gallery-img rounded shadow" alt="Gallery 2">
                </div>
            </div>
            <div class="carousel-item">
                <div class="d-flex justify-content-center">
                    <img src="https://images.pexels.com/photos/33507068/pexels-photo-33507068.jpeg" class="gallery-img rounded shadow" alt="Gallery 3">
                </div>
            </div>
        </div>

<button class="carousel-control-prev" type="button" data-bs-target="#galleryCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon custom-arrow" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>

<button class="carousel-control-next" type="button" data-bs-target="#galleryCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon custom-arrow" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</section>

More Examples

Bootstrap Image Gallery

Author:
Anonymous

2 years ago

7.3k

v.3.4
Bootstrap 5 Image Gallery

Author:
Anonymous

2 years ago

16k

v.5.3
E-Commerce Product Detail Page

Author:
Creative Araf

3 months ago

431

v.5.3
Image gallery in bootstrap
Responsive Image gallery

Author:
Mateo Rojas

1 year ago

6.1k

v.5.3
Responsive image galary with tabs

Author:
Arturo

1 year ago

9.7k

v.5.3
Hero slider

Author:
Juan Antonio González Hernández

7 months ago

3.1k

v.5.3
Scroll Animation
Scroll Animation

Author:
Rami AlAjo

1 year ago

4.1k

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

Author:
Prajwal Hallale

2 years ago

9.1k

v.5.3
vulgh

Author:
Anonymous

2 months ago

383

v.5.3
Blurry Loading
Blurry Loading

Author:
Rami AlAjo

1 year ago

2.8k

v.4.6
Card Layout
Using masonry in cards layout

Author:
almounkez

1 year ago

5k

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

Author:
Anonymous

2 years ago

9.4k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent

BootstrapExamples From the makers of tailwindflex.com

BootstrapExamples is a free library offering a diverse range of Bootstrap CSS components. Developed by the community, it's open for anyone to use.

Contacts

Email:

[email protected]

Links

Search

Resources

Free Tailwind CSS Components Free CSS Components

© 2026 BootstrapExamples. All Rights Reserved.

v1.3