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.