→ 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

959

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

Image slider
Image slider with auto-scrolling and with title and description

Author:
Anonymous

1 year ago

6.1k

v.5.3
Gallery #1

Author:
java stories story

5 months ago

1.7k

v.5.3
Image gallery in bootstrap
Responsive Image gallery

Author:
Mateo Rojas

1 year ago

4.6k

v.5.3
Bootstrap 5 Image Gallery

Author:
Anonymous

1 year ago

12.7k

v.5.3
Card Layout
Using masonry in cards layout

Author:
almounkez

1 year ago

3.9k

v.5.3
Responsive image galary with tabs

Author:
Arturo

1 year ago

6.7k

v.5.3
Bootstrap Image Gallery

Author:
Anonymous

1 year ago

5.4k

v.3.4
Blurry Loading
Blurry Loading

Author:
Rami AlAjo

11 months ago

2k

v.4.6
Scroll Animation
Scroll Animation

Author:
Rami AlAjo

11 months ago

2.9k

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

Author:
Prajwal Hallale

1 year ago

6.6k

v.5.3
Invoice template with bootstrap

Author:
Anonymous

1 year ago

1.1k

v.4.6
Credit cards bootstrap 5
credit cards design made with Bootstrap 5

Author:
Ankit khedkar

1 year ago

3.1k

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