Carousel captions in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visible caption text on the first slide?

Given this Bootstrap carousel code snippet, what caption text will appear on the first slide when the page loads?

Bootsrap

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
      <div class="carousel-caption d-none d-md-block">
        <h5>Welcome to Nature</h5>
        <p>Experience the beauty of the outdoors.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="slide2.jpg" class="d-block w-100" alt="Slide 2">
      <div class="carousel-caption d-none d-md-block">
        <h5>Adventure Awaits</h5>
        <p>Find your next journey here.</p>
      </div>
    </div>
  </div>
</div>

A Find your next journey here.

B Adventure Awaits

C Experience the beauty of the outdoors.

D Welcome to Nature

💡 Hint

Look for the caption inside the first carousel-item active block.

The first slide is marked with the class active. Its caption heading is inside h5 with text 'Welcome to Nature'.

❓ selector

intermediate

Which CSS selector targets all carousel captions visible on medium and larger screens?

In Bootstrap 5, which CSS selector correctly selects all carousel captions that are visible only on medium (md) and larger screen sizes?

A .carousel-caption.d-none.d-md-block

B .carousel-caption.d-md-none.d-block

C .carousel-caption.d-block.d-md-none

D .carousel-caption.d-none.d-sm-block

💡 Hint

Remember Bootstrap's display utility classes: d-none hides, d-md-block shows from medium screens up.

The class d-none hides the element by default, and d-md-block makes it visible as block starting at medium screen size.

🧠 Conceptual

advanced

Why use aria-label on carousel captions?

What is the main reason to add aria-label attributes to carousel caption elements in Bootstrap?

A To change the font style of the caption text.

B To improve accessibility by describing the caption content to screen readers.

C To make the caption text visible only on hover.

D To enable automatic slide transitions.

💡 Hint

Think about users who rely on assistive technologies.

The aria-label attribute provides descriptive text for screen readers, helping visually impaired users understand the caption content.

📝 Syntax

advanced

What error occurs with this incorrect caption markup?

What error or issue will occur if the carousel-caption div is placed outside the carousel-item div in Bootstrap?

Bootsrap

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-caption d-none d-md-block">
      <h5>Caption Outside</h5>
      <p>This caption is misplaced.</p>
    </div>
  </div>
</div>

A The caption will not appear on any slide because it is outside the slide container.

B The caption will appear on all slides simultaneously.

C Bootstrap will throw a JavaScript error and stop the carousel.

D The caption will appear only on the last slide automatically.

💡 Hint

Consider how Bootstrap associates captions with slides.

Captions must be inside each carousel-item to show with that slide. Outside placement means no caption is linked to any slide, so it won't display.

❓ layout

expert

How to vertically center carousel captions with Flexbox?

You want carousel captions to be vertically centered over the image in Bootstrap 5. Which CSS snippet correctly applies Flexbox to achieve this inside .carousel-caption?

A .carousel-caption { display: flex; align-items: flex-start; height: 100%; }

B .carousel-caption { display: block; vertical-align: middle; height: 100%; }

C .carousel-caption { display: flex; flex-direction: column; justify-content: center; height: 100%; }

D .carousel-caption { display: grid; place-items: flex-end; height: 100%; }

💡 Hint

Flexbox with justify-content: center centers content vertically in a column layout.

Setting display: flex and flex-direction: column makes the caption a vertical flex container. justify-content: center centers the content vertically inside the full height.

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