Carousel slides and controls in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add the main carousel container with the correct Bootstrap class.

Bootsrap

<div id="carouselExample" class="carousel [1]" data-bs-ride="carousel">
  <!-- Slides go here -->
</div>

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

Aslide

Bcarousel

Ccarousel-inner

Dcarousel-item

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'carousel-inner' or 'carousel-item' on the main container instead of 'carousel'.

Forgetting to add any carousel class.

The main container for a Bootstrap carousel must have the class carousel to work properly.

2fill in blank

medium

Complete the code to wrap all slides inside the correct inner container.

Bootsrap

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="[1]">
    <!-- Individual slides go here -->
  </div>
</div>

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

Acarousel-inner

Bcarousel-item

Ccarousel-control

Dcarousel-slide

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'carousel-item' for the container instead of individual slides.

Using 'carousel-control' which is for buttons, not slides.

The slides must be wrapped inside a div with class carousel-inner for Bootstrap to recognize the slide container.

3fill in blank

hard

Fix the error in the slide item class to make the first slide active.

Bootsrap

<div class="carousel-inner">
  <div class="carousel-item [1]">
    <img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
  </div>
</div>

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

Aactive

Bshow

Ccarousel-active

Dvisible

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'show' or 'visible' which do not activate the slide.

Using a non-existent class like 'carousel-active'.

The first slide must have the class active to be visible when the carousel loads.

4fill in blank

hard

Fill both blanks to add previous and next control buttons with correct classes.

Bootsrap

<button class="carousel-control-[1]" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
  <span class="carousel-control-[2]-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Previous</span>
</button>

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

Aprev

Bnext

Ccontrol

Dslide

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing 'prev' and 'next' classes incorrectly.

Using 'control' or 'slide' which are not valid suffixes here.

The previous button uses the class carousel-control-prev and the icon uses carousel-control-prev-icon.

5fill in blank

hard

Fill all three blanks to add the next control button with correct classes and attributes.

Bootsrap

<button class="carousel-control-[1]" type="button" data-bs-target="#carouselExample" data-bs-slide="[2]">
  <span class="carousel-control-[3]-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Next</span>
</button>

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

Aprev

Bnext

Dcontrol

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'prev' instead of 'next' for the next button.

Using 'control' which is not a valid suffix here.

The next button uses carousel-control-next for the button class, next for the slide attribute, and carousel-control-next-icon for the icon.