Carousel captions in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a caption container inside a Bootstrap carousel item.

Bootsrap

<div class="carousel-item active">
  <img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
  <div class="[1]">
    <h5>First Slide</h5>
    <p>This is the first slide caption.</p>
  </div>
</div>

Drag options to blanks, or click blank then click option'

Acarousel-caption

Bcarousel-item-caption

Ccaption-carousel

Dcarousel-text

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect class names like 'carousel-item-caption' or 'carousel-text' which do not exist in Bootstrap.

Forgetting to add the caption container inside the carousel item.

The Bootstrap class for captions inside carousel items is 'carousel-caption'. It positions the caption text properly over the image.

2fill in blank

medium

Complete the code to add a caption title inside the carousel caption container.

Bootsrap

<div class="carousel-caption d-none d-md-block">
  <[1]>Welcome to Our Site</[1]>
  <p>Enjoy the best experience.</p>
</div>

Drag options to blanks, or click blank then click option'

Ah5

Bh1

Cspan

Dh3

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-heading tags like

or for the caption title.

Using

which might be too large and not typical for captions.

Bootstrap examples commonly use

for carousel caption titles to keep headings clear and accessible.

3fill in blank

hard

Fix the error in the caption container class to make the caption visible on medium and larger screens.

Bootsrap

<div class="carousel-caption [1]">
  <h5>Slide Title</h5>
  <p>Slide description here.</p>
</div>

Drag options to blanks, or click blank then click option'

Ad-none d-lg-block

Bd-none d-sm-block

Cd-none d-md-block

Dd-block d-md-none

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'd-none d-sm-block' which shows the caption starting from small (sm) screens, whereas the standard is from medium (md).

Using 'd-block d-md-none' which hides caption on medium and larger screens.

The class 'd-none d-md-block' hides the caption on small screens and shows it on medium and larger screens, which is the Bootstrap recommended way.

4fill in blank

hard

Fill both blanks to create a caption with a title and a paragraph inside a carousel item.

Bootsrap

<div class="carousel-item">
  <img src="slide2.jpg" class="d-block w-100" alt="Slide 2">
  <div class="[1]">
    <[2]>Second Slide Title</[2]>
    <p>This is the second slide caption.</p>
  </div>
</div>

Drag options to blanks, or click blank then click option'

Acarousel-caption

Bh4

Ch5

Dcarousel-text

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect container class like 'carousel-text'.

Using heading tags that are too large or not typical like

.

The caption container uses 'carousel-caption' class. The heading inside captions is often

for proper size and style.

5fill in blank

hard

Fill all three blanks to create a carousel caption with a title, a subtitle, and a paragraph.

Bootsrap

<div class="carousel-caption [1]">
  <h5>[2]</h5>
  <h6>[3]</h6>
  <p>Enjoy our amazing features.</p>
</div>

Drag options to blanks, or click blank then click option'

Ad-none d-md-block

BWelcome!

CYour journey starts here

Dd-block d-sm-none

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong display classes that hide captions on all screens.

Mixing up title and subtitle text.

The caption is visible on medium and larger screens using 'd-none d-md-block'. The title is 'Welcome!' and the subtitle is 'Your journey starts here'.