Bootstrap Carousel

21 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Create Dynamic Carousels

In this Bootstrap tutorial, you’ll learn how to use Bootstrap’s Carousel classes to create slideshows for images or content, perfect for galleries or featured sections. We’ll use vibrant images for a lively look.

What You’ll Learn

Creating a basic carousel
Adding captions
Including navigation controls
Combining carousels with images

Prerequisites

Basic knowledge of HTML
A text editor (e.g., VS Code, Notepad)
A web browser (e.g., Chrome, Firefox)

Step 1: Understand Bootstrap Carousel

Bootstrap Carousel uses the carousel class with carousel-item to create a slideshow that cycles through images or content. It supports navigation controls, indicators, and captions for enhanced interactivity.

Assume Bootstrap CSS and JS are included in your project (we’ll skip the <link> and <script> tags as requested).

Step 2: Create a Basic Carousel

Start with a simple carousel with images. Use this code:

<div class="container">
    <h3>Basic Carousel</h3>
    <div class="carousel slide" id="basicCarousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://placehold.co/800x400/28a745/ffffff" class="d-block w-100" alt="Green placeholder">
            </div>
            <div class="carousel-item">
                <img src="https://placehold.co/800x400/007bff/ffffff" class="d-block w-100" alt="Blue placeholder">
            </div>
        </div>
    </div>
</div>

Explanation:

container: Centers and constrains content.
carousel slide: Initializes the carousel.
id="basicCarousel": Unique identifier for the carousel.
carousel-inner: Contains the slides.
carousel-item: Defines each slide.
active: Marks the first slide as visible.
d-block w-100: Makes images block-level and full-width.
Uses 800×400 green and blue images for vibrancy.

This creates a slideshow that cycles manually.

Step 3: Add Captions

Include captions for context on each slide. Try this:

<div class="container">
    <h3>Carousel with Captions</h3>
    <div class="carousel slide" id="captionCarousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://placehold.co/800x400/ffc107/ffffff" class="d-block w-100" alt="Yellow placeholder">
                <div class="carousel-caption">
                    <h5>First Slide</h5>
                    <p>Explore our featured content.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://placehold.co/800x400/28a745/ffffff" class="d-block w-100" alt="Green placeholder">
                <div class="carousel-caption">
                    <h5>Second Slide</h5>
                    <p>Discover more details.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Explanation:

carousel-caption: Adds a caption overlay on each slide.
h5 and p: Style the caption title and text.
Uses yellow and green 800×400 images for contrast.
Captions appear centered at the bottom of each slide.

This enhances slides with descriptive text.

Step 4: Include Navigation Controls

Add indicators and buttons for user control. Add this:

<div class="container">
    <h3>Carousel with Navigation</h3>
    <div class="carousel slide" id="navCarousel" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#navCarousel" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#navCarousel" data-bs-slide-to="1"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://placehold.co/800x400/007bff/ffffff" class="d-block w-100" alt="Blue placeholder">
                <div class="carousel-caption">
                    <h5>Slide 1</h5>
                    <p>Click to navigate.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://placehold.co/800x400/ffc107/ffffff" class="d-block w-100" alt="Yellow placeholder">
                <div class="carousel-caption">
                    <h5>Slide 2</h5>
                    <p>View more content.</p>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#navCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#navCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
    </div>
</div>

Explanation:

carousel-indicators: Adds dots to show and navigate slides.
data-bs-slide-to="0": Links each indicator to a slide.
carousel-control-prev and carousel-control-next: Add previous/next buttons.
data-bs-ride="carousel": Enables automatic cycling.
Uses blue and yellow 800×400 images.

This makes the carousel fully interactive.

Step 5: Combine with an Image

Pair a carousel with a smaller dummy image for context. Try this:

<div class="container">
    <div class="row">
        <div class="col-8">
            <h3>Gallery Carousel</h3>
            <p>Showcase our images.</p>
            <div class="carousel slide" id="galleryCarousel" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="https://placehold.co/800x400/28a745/ffffff" class="d-block w-100" alt="Green placeholder">
                        <div class="carousel-caption">
                            <h5>Image 1</h5>
                            <p>Explore the gallery.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="https://placehold.co/800x400/007bff/ffffff" class="d-block w-100" alt="Blue placeholder">
                        <div class="carousel-caption">
                            <h5>Image 2</h5>
                            <p>View more images.</p>
                        </div>
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#galleryCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#galleryCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </button>
            </div>
        </div>
        <div class="col-4">
            <img src="https://placehold.co/200x150/28a745/ffffff" class="img-fluid rounded" alt="Green placeholder">
        </div>
    </div>
</div>

Explanation:

row and col-8, col-4: Splits content into carousel (8 units) and image (4 units).
carousel slide with data-bs-ride="carousel": Auto-cycles slides.
carousel-control-prev/next: Adds navigation buttons.
Uses 800×400 green and blue images in the carousel; 200×150 green image aside.
img-fluid rounded: Ensures the side image is responsive with rounded corners.

The smaller image suggests a gallery context.

Final Code

Here’s a combined example with varied carousels and an image:

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Simple Carousel</h3>
            <div class="carousel slide" id="simpleCarousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="https://placehold.co/800x400/007bff/ffffff" class="d-block w-100" alt="Blue placeholder">
                    </div>
                    <div class="carousel-item">
                        <img src="https://placehold.co/800x400/ffc107/ffffff" class="d-block w-100" alt="Yellow placeholder">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>Carousel with Controls</h3>
            <div class="carousel slide" id="controlCarousel" data-bs-ride="carousel">
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#controlCarousel" data-bs-slide-to="0" class="active"></button>
                    <button type="button" data-bs-target="#controlCarousel" data-bs-slide-to="1"></button>
                </div>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="https://placehold.co/800x400/28a745/ffffff" class="d-block w-100" alt="Green placeholder">
                        <div class="carousel-caption">
                            <h5>Feature 1</h5>
                            <p>Highlighting our product.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="https://placehold.co/800x400/007bff/ffffff" class="d-block w-100" alt="Blue placeholder">
                        <div class="carousel-caption">
                            <h5>Feature 2</h5>
                            <p>More to explore.</p>
                        </div>
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#controlCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#controlCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-7">
            <h3>Project Showcase</h3>
            <p>View our latest work.</p>
            <div class="carousel slide" id="projectCarousel" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="https://placehold.co/800x400/ffc107/ffffff" class="d-block w-100" alt="Yellow placeholder">
                        <div class="carousel-caption">
                            <h5>Project 1</h5>
                            <p>Innovative design.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="https://placehold.co/800x400/28a745/ffffff" class="d-block w-100" alt="Green placeholder">
                        <div class="carousel-caption">
                            <h5>Project 2</h5>
                            <p>Advanced technology.</p>
                        </div>
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#projectCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#projectCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </button>
            </div>
        </div>
        <div class="col-5">
            <img src="https://placehold.co/250x150/ff6b6b/ffffff" class="img-fluid rounded" alt="Red placeholder">
        </div>
    </div>
</div>

Output

Your webpage should show:

A simple carousel with blue and yellow 800×400 images.
A carousel with indicators, captions, and navigation buttons (green and blue 800×400 images).
A project showcase carousel with captions and navigation (yellow and green 800×400 images) beside a red 250×150 image.
All carousels are responsive, adjusting for mobile, with colorful images for a vibrant look.

Next Steps

Check the Bootstrap Carousel Docs for more options.
Try data-bs-interval to adjust slide timing.
Add carousel-fade for fade transitions.

Conclusion

You’ve mastered Bootstrap Carousels! With classes like carousel, carousel-item, and carousel-caption, plus striking images, you’ve created dynamic, interactive slideshows. Keep experimenting to enhance your webpages.