→ 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

830

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="d-block w-50 img-fluid 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="d-block w-50 img-fluid 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="d-block w-50 img-fluid 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" 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" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>

</div>
    </section>

More Examples

Blurry Loading
Blurry Loading

Author:
Rami AlAjo

9 months ago

1.9k

v.4.6
Bootstrap 5 Image Gallery

Author:
Anonymous

1 year ago

11.9k

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.1k

v.5.3
Responsive image galary with tabs

Author:
Arturo

11 months ago

6.2k

v.5.3
Bootstrap Image Gallery

Author:
Anonymous

1 year ago

5.1k

v.3.4
Gallery #1

Author:
java stories story

4 months ago

1.5k

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

Author:
Anonymous

1 year ago

5.6k

v.5.3
Image gallery in bootstrap
Responsive Image gallery

Author:
Mateo Rojas

11 months ago

4.3k

v.5.3
Card Layout
Using masonry in cards layout

Author:
almounkez

11 months ago

3.6k

v.5.3
Scroll Animation
Scroll Animation

Author:
Rami AlAjo

9 months ago

2.6k

v.4.6
contact us

Author:
java stories story

4 months ago

2.4k

v.5.3
Bootstrap Footer example
dark footer

Author:
Anonymous

1 year ago

3.9k

v.3.4

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

© 2025 BootstrapExamples. All Rights Reserved.

v1.3