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.

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