→ 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.6k

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

Card Layout
Using masonry in cards layout

Author:
almounkez

1 year ago

4.8k

v.5.3
Bootstrap Image Gallery

Author:
Anonymous

2 years ago

7k

v.3.4
Accordian Section

Author:
istiakahmedchowdhury10

1 month ago

72

v.4.6
Scroll Animation
Scroll Animation

Author:
Rami AlAjo

1 year ago

3.9k

v.4.6
Gallery #1

Author:
java stories story

1 year ago

2.5k

v.5.3
Blurry Loading
Blurry Loading

Author:
Rami AlAjo

1 year ago

2.7k

v.4.6
Image gallery in bootstrap
Responsive Image gallery

Author:
Mateo Rojas

1 year ago

5.9k

v.5.3
Bootstrap 5 Image Gallery

Author:
Anonymous

2 years ago

15.5k

v.5.3
Hero slider

Author:
Juan Antonio González Hernández

5 months ago

2.3k

v.5.3
E-Commerce Full

Author:
Zahid Hasan Riyad

3 weeks ago

253

v.5.3
E-Commerce Product Detail Page

Author:
Creative Araf

1 month ago

256

v.5.3
E-Commarce

Author:
Anonymous

3 weeks ago

121

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