Carousel slides and controls in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a carousel in web development?

A carousel is a slideshow component that cycles through elements like images or text, usually with controls to move forward or backward.

beginner

Which Bootstrap class is used to create the main container for a carousel?

The <code>carousel</code> class is used on a <code>&lt;div&gt;</code> to create the main container for a Bootstrap carousel.

intermediate

How do you add navigation controls to a Bootstrap carousel?

You add buttons with classes <code>carousel-control-prev</code> and <code>carousel-control-next</code> inside the carousel container to let users move slides backward and forward.

intermediate

What attribute connects carousel controls to the carousel element in Bootstrap?

The data-bs-target attribute on control buttons points to the carousel's ID to link controls with the carousel.

intermediate

Why is it important to include aria-label and aria-hidden in carousel controls?

These attributes improve accessibility by helping screen readers understand the controls and hiding decorative icons from assistive technologies.

Which Bootstrap class is used for each slide inside a carousel?

A item-slide

B slide-item

C carousel-slide

D carousel-item

Each slide inside a Bootstrap carousel uses the class carousel-item.

What attribute should the carousel control buttons have to specify which carousel they control?

A data-bs-slide

B data-bs-target

C data-slide-to

D data-target-slide

The data-bs-target attribute points to the carousel's ID to link controls.

Which element is used to wrap the entire carousel in Bootstrap?

A <div>

B <section>

C <article>

D <main>

A <div> with class carousel wraps the entire carousel.

What role do the carousel-control-prev and carousel-control-next classes serve?

A They create buttons to move slides backward and forward.

B They pause the carousel automatically.

C They add captions to slides.

D They style the indicators below the carousel.

These classes create navigation buttons to move slides backward and forward.

Why should carousel controls include aria-label attributes?

A To add color to buttons.

B To improve keyboard navigation.

C To help screen readers describe the controls.

D To make the carousel slide automatically.

The aria-label helps screen readers describe the purpose of controls.

Explain how to build a basic Bootstrap carousel with slides and navigation controls.

Think about the structure and classes needed for slides and controls.

Describe why accessibility is important in carousel controls and how Bootstrap supports it.

Consider users who rely on assistive technologies.