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

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

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

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.
      
    
  
  

Hint

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

Practice

1. What is the purpose of the carousel-caption class in a Bootstrap carousel?

easy

A. To add text overlays on each slide explaining the content

B. To control the slide transition speed

C. To add navigation arrows to the carousel

D. To set the background color of the carousel

Solution

1. Step 1: Understand the role of carousel-caption

   The carousel-caption class is used inside each carousel-item to add text overlays on slides.

2. Step 2: Differentiate from other carousel features

   Other options control speed, navigation, or styling but do not add text overlays.

3. Final Answer:

   To add text overlays on each slide explaining the content -> Option A

4. Quick Check:

   carousel-caption adds text overlays = C [OK]

Hint: Remember captions explain slides visually [OK]

Common Mistakes:

• Confusing caption with navigation controls
• Thinking it changes slide speed
• Assuming it styles background color

2. Which of the following is the correct way to add a caption inside a Bootstrap carousel slide?

easy

A. <caption>Caption Text</caption> inside carousel-item

B. <div class='carousel-caption'>Caption Text</div> inside carousel-item

C. <div class='carousel-text'>Caption Text</div> outside carousel-item

D. <span class='carousel-caption'>Caption Text</span> inside carousel-inner

Solution

1. Step 1: Identify correct caption container

   The Bootstrap documentation specifies using <div class='carousel-caption'> inside each carousel-item.

2. Step 2: Check other options for correctness

   <caption> is for tables, carousel-text is not a Bootstrap class, and span is less common and outside the item is incorrect.

3. Final Answer:

   <div class='carousel-caption'>Caption Text</div> inside carousel-item -> Option B

4. Quick Check:

   Use div.carousel-caption inside carousel-item = B [OK]

Hint: Use div with class carousel-caption inside each slide [OK]

Common Mistakes:

• Using <caption> tag which is for tables
• Placing caption outside carousel-item
• Using wrong class names like carousel-text

3. Given this snippet inside a Bootstrap carousel slide:

<div class='carousel-caption text-start'>Caption</div>

What will be the alignment of the caption text when rendered?

medium

A. Text hidden and not visible

B. Text centered horizontally

C. Text aligned to the right side of the slide

D. Text aligned to the left side of the slide

Solution

1. Step 1: Understand Bootstrap text alignment classes

   The class text-start aligns text to the left side in Bootstrap.

2. Step 2: Apply alignment to carousel-caption

   Since carousel-caption contains text-start, the caption text will appear left aligned on the slide.

3. Final Answer:

   Text aligned to the left side of the slide -> Option D

4. Quick Check:

   text-start means left aligned = A [OK]

Hint: text-start means left alignment in Bootstrap [OK]

Common Mistakes:

• Confusing text-start with center or right alignment
• Assuming captions are always centered
• Thinking text-start hides text

4. You wrote this code inside a Bootstrap carousel slide:

<div class='carousel-caption text-center'>Welcome</div>

But the caption text does not appear on the slide. What is the likely cause?

medium

A. Missing carousel-item wrapper around the caption

B. Using text-center hides the caption

C. The caption must be outside carousel-inner

D. Bootstrap requires captions to be <span> not <div>

Solution

1. Step 1: Check caption placement rules

   Bootstrap requires carousel-caption to be inside a carousel-item for it to show properly.

2. Step 2: Evaluate other options

   text-center does not hide text, captions must be inside carousel-inner, and div is the correct tag.

3. Final Answer:

   Missing carousel-item wrapper around the caption -> Option A

4. Quick Check:

   Caption must be inside carousel-item = A [OK]

Hint: Always nest captions inside carousel-item div [OK]

Common Mistakes:

• Placing caption outside carousel-item
• Thinking text-center hides text
• Using wrong tag for caption

5. You want to create a Bootstrap carousel with three slides, each having a caption aligned differently: first left, second center, third right. Which code snippet correctly applies these caption alignments?

hard

A. <div class='carousel-item active'>
<div class='carousel-caption text-center'>First</div>
</div>
<div class='carousel-item'>
<div class='carousel-caption text-center'>Second</div>
</div>
<div class='carousel-item'>
<div class='carousel-caption text-center'>Third</div>
</div>

B. <div class='carousel-item active'>
<div class='carousel-caption text-end'>First</div>
</div>
<div class='carousel-item'>
<div class='carousel-caption text-start'>Second</div>
</div>
<div class='carousel-item'>
<div class='carousel-caption text-center'>Third</div>
</div>

C. <div class='carousel-item active'>
<div class='carousel-caption text-start'>First</div>
</div>
<div class='carousel-item'>
<div class='carousel-caption text-center'>Second</div>
</div>
<div class='carousel-item'>
<div class='carousel-caption text-end'>Third</div>
</div>

D. <div class='carousel-item active'>
<div class='carousel-caption text-center'>First</div>
</div>
<div class='carousel-item'>
<div class='carousel-caption text-end'>Second</div>
</div>
<div class='carousel-item'>
<div class='carousel-caption text-start'>Third</div>
</div>

Solution

1. Step 1: Match caption alignment classes to slides

   The first slide uses text-start for left alignment, second uses text-center for center, and third uses text-end for right alignment.

2. Step 2: Verify code structure and correctness

   Each caption is inside its carousel-item with correct alignment classes matching the requirement.

3. Final Answer:

   Code snippet with first left, second center, third right using text-start, text-center, text-end respectively -> Option C

4. Quick Check:

   Use text-start, text-center, text-end for left, center, right captions = D [OK]

Hint: Use text-start, text-center, text-end for left, center, right [OK]

Common Mistakes:

• Mixing alignment classes order
• Using same alignment for all captions
• Placing captions outside carousel-item