Close button component in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the Bootstrap close button component?

It provides a simple, accessible button to close or dismiss content like modals, alerts, or popups.

beginner

Which HTML element and class does Bootstrap use for a close button?

A <button> element with the class btn-close is used for the close button.

intermediate

How do you make a Bootstrap close button accessible for screen readers?

Add aria-label="Close" to the button so screen readers announce its purpose.

beginner

What visual style does the Bootstrap close button have by default?

It shows a small 'X' icon with no background and changes color on hover for clarity.

intermediate

How can you customize the size of a Bootstrap close button?

Use additional classes like btn-close-sm or btn-close-lg to change its size.

Which class is used to create a close button in Bootstrap?

A close-btn

B btn-close

C btn-dismiss

D close-button

Bootstrap uses the class btn-close for close buttons.

What attribute should you add to a Bootstrap close button for accessibility?

A role="button"

B title="Close"

C alt="Close"

D aria-label="Close"

Adding aria-label="Close" helps screen readers understand the button's purpose.

What HTML element is recommended for a Bootstrap close button?

A <button>

B <a>

C <div>

D <span>

A <button> element is used for semantic and accessible close buttons.

How does the Bootstrap close button visually indicate it is clickable?

A It blinks

B It shows a tooltip

C It changes color on hover

D It grows in size

The close button changes color on hover to show it is interactive.

Which class would you add to make a larger Bootstrap close button?

A btn-close-lg

B btn-close-large

C btn-close-big

D btn-close-xl

Bootstrap provides btn-close-lg to increase the close button size.

Explain how to create an accessible close button using Bootstrap.

Think about HTML element, Bootstrap class, and accessibility attribute.

Describe how the Bootstrap close button looks and behaves visually.

Focus on icon shape, background, hover effect, and interactivity.