Close button component in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Bootstrap close button.

Bootsrap

<button type="button" class="btn-close" aria-label="[1]"></button>

Drag options to blanks, or click blank then click option'

ADismiss

BClose

CExit

DCancel

Attempts:

3 left

💡 Hint

Common Mistakes

Using labels like 'Dismiss' or 'Exit' which are less standard for close buttons.

Leaving aria-label empty or missing.

The aria-label attribute should describe the button's purpose for screen readers. The standard label for a close button is Close.

2fill in blank

medium

Complete the code to add a close button inside a Bootstrap alert.

Bootsrap

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

Drag options to blanks, or click blank then click option'

Abtn-close

Bclose-btn

Cclose-button

Dbtn-close-alert

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect class names that do not apply Bootstrap styles.

Omitting the btn-close class.

The Bootstrap class btn-close styles the button as a close icon. Other class names are not recognized by Bootstrap.

3fill in blank

hard

Fix the error in the close button code inside a modal header.

Bootsrap

<div class="modal-header">
  <h5 class="modal-title">Modal title</h5>
  <button type="button" class="btn-close" data-bs-dismiss="[1]" aria-label="Close"></button>
</div>

Drag options to blanks, or click blank then click option'

Adialog

Bwindow

Cpopup

Dmodal

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect values like 'dialog' or 'popup' which do not trigger modal dismissal.

Leaving the attribute empty.

The data-bs-dismiss attribute should be set to modal to close the Bootstrap modal properly.

4fill in blank

hard

Fill both blanks to create a dismissible Bootstrap toast with a close button.

Bootsrap

<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Notification</strong>
    <button type="button" class="[1]" data-bs-dismiss="[2]" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, this is a toast message.
  </div>
</div>

Drag options to blanks, or click blank then click option'

Abtn-close

Btoast

Calert

Dbtn-close-toast

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'alert' or other values for dismissal which won't close the toast.

Using wrong class names for the button.

The close button uses the btn-close class. The data-bs-dismiss attribute must be set to toast to dismiss the toast component.

5fill in blank

hard

Fill all three blanks to create a Bootstrap modal with a close button in the header that dismisses the modal.

Bootsrap

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="[1]" data-bs-dismiss="[2]" aria-label="[3]"></button>
      </div>
      <div class="modal-body">
        Modal body content goes here.
      </div>
    </div>
  </div>
</div>

Drag options to blanks, or click blank then click option'

Abtn-close

Bmodal

CClose

Dbtn-close-modal

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect class names like 'btn-close-modal'.

Setting data-bs-dismiss to wrong values like 'dialog'.

Missing or incorrect aria-label.

The close button uses the btn-close class. The data-bs-dismiss attribute must be modal to close the modal. The aria-label should be Close for accessibility.

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