Close button component in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this Bootstrap close button code?

Look at the following HTML code using Bootstrap 5. What will you see in the browser?

Bootsrap

<button type="button" class="btn-close" aria-label="Close"></button>

A A small square button with an 'X' icon aligned to the right side, no text visible.

B A button with a visible checkbox inside it.

C A large button with the text 'Close' inside it.

D A button with a circle and a plus '+' sign inside.

💡 Hint

Bootstrap's close button uses a small icon with no text by default.

The Bootstrap 'btn-close' class creates a small button with an 'X' icon for closing dialogs or alerts. It does not show any text.

❓ accessibility

intermediate

Which attribute ensures the close button is accessible to screen readers?

Given a Bootstrap close button, which attribute helps screen readers understand its purpose?

Bootsrap

<button type="button" class="btn-close" ???></button>

A role="button"

B title="Close Button"

C aria-label="Close"

D alt="Close"

💡 Hint

Screen readers use aria-label to describe buttons without visible text.

The aria-label attribute provides an accessible name for the button, so screen readers announce it as 'Close'.

📝 Syntax

advanced

What error occurs with this close button code?

Identify the error in this Bootstrap close button code snippet:

Bootsrap

<button type="button" class="btn-close" aria-label="Close"></button>

A SyntaxError: Unexpected closing tag '</btn>'

B Accessibility warning: missing aria-label

C TypeError: class 'btn-close' not found

D No error, renders correctly

💡 Hint

Check if all HTML tags are properly opened and closed.

The closing tag '' is invalid because 'btn' is not a valid HTML tag. The button is self-closed with ''.

❓ layout

advanced

How to position a Bootstrap close button at the top-right corner of a modal?

Which CSS class combination correctly places the close button at the top-right inside a Bootstrap modal header?

Bootsrap

<div class="modal-header">
  <h5 class="modal-title">Modal title</h5>
  <button type="button" class="???" aria-label="Close"></button>
</div>

A btn-close float-end

B btn-close me-auto

C btn-close float-start

D btn-close ms-auto

💡 Hint

Use margin utilities to push the button to the right.

The 'ms-auto' class adds left margin auto, pushing the button to the right side inside a flex container like modal-header.

🧠 Conceptual

expert

What happens if you omit the aria-label on a Bootstrap close button?

Consider a close button with class 'btn-close' but no aria-label attribute. What is the impact on accessibility?

Bootsrap

<button type="button" class="btn-close"></button>

A The button will not render visually in the browser.

B Screen readers may not announce the button's purpose, causing confusion for users relying on assistive technology.

C The button will automatically inherit the label 'Close' from Bootstrap CSS.

D The button will cause a JavaScript error when clicked.

💡 Hint

Think about how screen readers identify buttons without visible text.

Without aria-label, screen readers have no descriptive text for the button, so users may not understand its function.