Carousel indicators in Bootsrap - Mini Project: Build & Apply

Bootstrap Carousel Indicators

📖 Scenario: You want to create a simple image carousel on a webpage to showcase three pictures. You will use Bootstrap's carousel component and add clickable indicators so users can see which slide is active and jump to any slide.

🎯 Goal: Build a Bootstrap carousel with three slides and add the correct carousel indicators below it. The indicators should highlight the active slide and allow navigation between slides.

📋 What You'll Learn

Use Bootstrap 5 carousel structure

Create exactly three carousel items with placeholder images

Add carousel indicators with three buttons

Make sure the first indicator is active initially

Use correct data attributes for indicators to control the carousel

💡 Why This Matters

🌍 Real World

Carousels are common on websites to showcase images, products, or promotions in a small space with user-friendly navigation.

💼 Career

Knowing how to implement Bootstrap carousels with indicators and controls is useful for front-end web development roles that involve UI design and user experience.

1

Create the basic carousel structure with three slides

Write the HTML to create a div with class carousel slide and id myCarousel. Inside it, add a div with class carousel-inner containing three div elements with class carousel-item. The first carousel-item should also have the class active. Inside each carousel-item, add an img tag with src set to https://via.placeholder.com/800x400?text=Slide+1, Slide+2, and Slide+3 respectively, and alt text as Slide 1, Slide 2, and Slide 3.

Bootsrap

Need a hint?

Remember to add the active class only to the first carousel-item. Use the placeholder image URLs exactly as given.

2

Add the carousel indicators container

Below the div with class carousel-inner, add a div with class carousel-indicators inside the div with id myCarousel. This container will hold the indicator buttons.

Bootsrap

Need a hint?

Place the carousel-indicators div directly inside the main carousel div, after the carousel-inner div.

3

Add three indicator buttons inside the indicators container

Inside the div with class carousel-indicators, add three button elements. Each button should have type="button", data-bs-target="#myCarousel", and data-bs-slide-to attributes set to 0, 1, and 2 respectively. The first button should also have the class active and the attribute aria-current="true". Each button should have an aria-label attribute with values Slide 1, Slide 2, and Slide 3 respectively.

Bootsrap

Need a hint?

Make sure the first button has the active class and aria-current="true". Use the exact attribute names and values.

4

Add the carousel controls for previous and next navigation

After the div with class carousel-indicators, add two button elements for carousel controls. The first button should have class carousel-control-prev, type="button", data-bs-target="#myCarousel", and data-bs-slide="prev". Inside it, add a span with class carousel-control-prev-icon and aria-hidden="true", and a span with class visually-hidden containing the text Previous. The second button should be similar but with class carousel-control-next, data-bs-slide="next", and inner spans for next icon and text Next.

Bootsrap

Need a hint?

Use the exact classes and attributes for the control buttons. The visually hidden spans help screen readers understand the buttons.