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.

Practice

1. What is the main purpose of the Bootstrap btn-close component?

easy

A. To create a small button that closes or dismisses content like alerts or modals

B. To open new modal windows on click

C. To submit forms with a close icon

D. To style text with a close symbol

Solution

1. Step 1: Understand the role of btn-close

   The btn-close class is designed to create a small button with an X icon.

2. Step 2: Identify its common use

   This button is used to close or dismiss UI elements like alerts or modals.

3. Final Answer:

   To create a small button that closes or dismisses content like alerts or modals -> Option A

4. Quick Check:

   Close button = dismiss content [OK]

Hint: Close button means dismiss content, not open or submit [OK]

Common Mistakes:

• Thinking it opens modals instead of closing
• Confusing with form submit buttons
• Assuming it styles text only

2. Which of the following is the correct HTML syntax to create a Bootstrap close button with accessibility support?

easy

A.

B. Close

C.

D. X

Solution

1. Step 1: Check the required element and classes

   The close button should be a button element with class btn-close.

2. Step 2: Verify accessibility attributes

   It must have aria-label="Close" for screen readers.

3. Final Answer:

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

4. Quick Check:

   Button + btn-close + aria-label = correct syntax [OK]

Hint: Use <button> with btn-close and aria-label="Close" [OK]

Common Mistakes:

• Using <div> or <span> instead of <button>
• Missing aria-label attribute
• Adding text inside the button instead of empty

3. What will be the visible result in the browser when you use this code?

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  Warning! Something went wrong.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

medium

A. A red error alert with a close button that does nothing

B. A plain text message with no button visible

C. A yellow warning alert with a small X button on the right to close it

D. An alert box with a submit button labeled 'Close'

Solution

1. Step 1: Identify alert classes and behavior

   The alert alert-warning alert-dismissible fade show classes create a yellow warning alert that can be dismissed.

2. Step 2: Understand the close button role

   The btn-close button with data-bs-dismiss="alert" will show a small X that closes the alert on click.

3. Final Answer:

   A yellow warning alert with a small X button on the right to close it -> Option C

4. Quick Check:

   Alert-warning + btn-close = dismissible yellow alert [OK]

Hint: Alert-warning + btn-close = yellow alert with close X [OK]

Common Mistakes:

• Confusing alert-warning with alert-danger color
• Thinking close button does nothing without JS
• Expecting text inside the close button

4. You wrote this close button code but the button does not appear:

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

What is the main issue?

medium

A. The class should be btn-close-icon instead of btn-close

B. Missing type="button" attribute causes it not to render

C. The aria-label attribute must be 'close-button' instead of 'Close'

D. Including text 'X' inside the button breaks the icon display

Solution

1. Step 1: Check button content rules

   The Bootstrap close button uses an empty button with no inner text to show the X icon via CSS.

2. Step 2: Understand effect of adding text

   Adding 'X' inside overrides the icon and breaks the styling, so the button looks wrong or missing.

3. Final Answer:

   Including text 'X' inside the button breaks the icon display -> Option D

4. Quick Check:

   Close button must be empty inside [OK]

Hint: Close button must be empty inside, no text allowed [OK]

Common Mistakes:

• Assuming type="button" is required to show button
• Changing aria-label text unnecessarily
• Using wrong class name for close button

5. You want to create a modal with a close button in the top-right corner using Bootstrap. Which code snippet correctly adds an accessible close button inside the modal header?

hard

A.
Modal title

B.
Modal title

C.
Modal title

D.
Modal title
X

Solution

1. Step 1: Confirm correct element and classes for modal close

   The close button inside a modal header must be a button with class btn-close and data-bs-dismiss="modal" to close the modal.

2. Step 2: Check accessibility attributes

   It must have aria-label="Close" so screen readers understand its purpose.

3. Final Answer:

   Modal header with button type="button", class btn-close, data-bs-dismiss="modal", and aria-label="Close" -> Option B

4. Quick Check:

   Modal close button = btn-close + data-bs-dismiss + aria-label [OK]

Hint: Modal close button needs data-bs-dismiss="modal" and aria-label [OK]

Common Mistakes:

• Adding text inside the button breaks icon
• Using <span> instead of <button>
• Missing data-bs-dismiss attribute