Carousel captions in Bootsrap - Mini Project: Build & Apply

Bootstrap Carousel Captions

📖 Scenario: You are creating a simple image carousel for a travel website. Each slide will show a beautiful destination with a caption describing it.

🎯 Goal: Build a Bootstrap carousel with three slides. Each slide must have an image and a caption with a title and a short description.

📋 What You'll Learn

Use Bootstrap 5 carousel structure

Include exactly three carousel items

Each carousel item must have an image with alt text

Add a caption with a heading and paragraph inside each carousel item

Include carousel controls for previous and next navigation

💡 Why This Matters

🌍 Real World

Carousels are common on websites to showcase images or promotions in a small space with interactive navigation.

💼 Career

Knowing how to implement accessible and responsive carousels is useful for front-end web developers working on marketing or portfolio websites.

1

Create the basic carousel structure

Write the HTML code to create a Bootstrap carousel container with the id travelCarousel. Inside it, add a div with class carousel-inner to hold the slides. Add the first carousel item with class carousel-item active and inside it place an img tag with src="https://via.placeholder.com/800x400?text=Beach+Sunset" and alt="Beach Sunset".

Bootsrap

Need a hint?

Remember to add the carousel-item active class to the first slide and include the image with the correct src and alt attributes.

2

Add configuration for the second and third slides

Add two more div elements with class carousel-item inside the carousel-inner. The second slide's image should have src="https://via.placeholder.com/800x400?text=Mountain+View" and alt="Mountain View". The third slide's image should have src="https://via.placeholder.com/800x400?text=City+Lights" and alt="City Lights".

Bootsrap

Need a hint?

Add two more carousel-item divs with the correct images and alt text as shown.

3

Add captions to each carousel item

Inside each carousel-item div, add a div with class carousel-caption d-none d-md-block. For the first slide, add a h5 with text Beach Sunset and a p with text Relax by the ocean with stunning sunsets.. For the second slide, add a h5 with text Mountain View and a p with text Enjoy breathtaking mountain scenery.. For the third slide, add a h5 with text City Lights and a p with text Experience the vibrant city nightlife..

Bootsrap

Need a hint?

Use the carousel-caption d-none d-md-block class for captions and add the heading and paragraph inside each slide.

4

Add carousel controls for navigation

Add the previous and next control buttons outside the carousel-inner but inside the travelCarousel div. Use button elements with classes carousel-control-prev and carousel-control-next. For the previous button, set data-bs-target="#travelCarousel" and data-bs-slide="prev". For the next button, set data-bs-target="#travelCarousel" and data-bs-slide="next". Inside each button, add a span with classes carousel-control-prev-icon or carousel-control-next-icon and aria-hidden="true". Also add a span with class visually-hidden containing the text Previous or Next respectively.

Bootsrap

  
    
      
      
        Beach Sunset
        Relax by the ocean with stunning sunsets.
      
    
    
      
      
        Mountain View
        Enjoy breathtaking mountain scenery.
      
    
    
      
      
        City Lights
        Experience the vibrant city nightlife.
      
    
  
  

Need a hint?

Use button elements with the correct Bootstrap classes and attributes for previous and next controls.