Modal structure and triggers in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visible result when this Bootstrap modal trigger is clicked?

Given the following HTML snippet using Bootstrap 5, what will the user see after clicking the button?

Bootsrap

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Open Modal</button>

<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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        This is the modal body content.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

A A popup window appears with the title 'Modal title', body text 'This is the modal body content.', and two buttons labeled 'Close' and 'Save changes'.

B Nothing happens because the modal is missing the 'show' class.

C The page navigates to a new URL because the button is a link.

D An error message appears because the modal ID does not match the button's data-bs-target.

💡 Hint

Look at the button's data attributes and the modal's ID to understand the trigger.

The button uses data-bs-toggle="modal" and data-bs-target="#exampleModal" which triggers the modal with ID 'exampleModal' to appear. The modal content includes a header, body, and footer with buttons. The modal is hidden initially but appears on button click.

🧠 Conceptual

intermediate

Which attribute correctly links a button to open a Bootstrap modal?

You want a button to open a modal with ID 'myModal'. Which attribute and value should you add to the button?

A data-toggle="modal" href="#myModal"

B data-bs-toggle="modal" data-bs-target="#myModal"

C onclick="openModal('myModal')"

D aria-controls="myModal"

💡 Hint

Bootstrap 5 uses 'data-bs-' prefix for JavaScript behavior.

In Bootstrap 5, to trigger a modal, the button needs data-bs-toggle="modal" and data-bs-target="#modalID". The other options either use old syntax or are unrelated.

📝 Syntax

advanced

What error occurs if the modal's HTML is missing the 'modal-dialog' div?

Consider this modal HTML missing the

wrapper. What happens when the modal is triggered?

Bootsrap

<div class="modal fade" id="testModal" tabindex="-1" aria-hidden="true">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Title</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">Content</div>
  </div>
</div>

A The modal content is hidden and cannot be seen.

B Bootstrap throws a JavaScript error and modal does not open.

C The modal opens normally with no visible difference.

D The modal appears but content is not centered or styled properly.

💡 Hint

The 'modal-dialog' class controls modal positioning and styling.

The 'modal-dialog' div is required to center and style the modal content. Without it, the modal content appears but is not positioned or styled correctly, causing layout issues but no JS errors.

❓ accessibility

advanced

Which attribute improves accessibility by linking modal title to the modal dialog?

In Bootstrap modals, which attribute on the modal container connects the modal title for screen readers?

A aria-labelledby="modalTitleId"

B aria-describedby="modalTitleId"

C aria-hidden="false"

D role="dialog"

💡 Hint

This attribute points to the element that labels the modal.

The 'aria-labelledby' attribute on the modal container references the ID of the modal's title element, helping screen readers announce the modal's title. 'aria-describedby' is for description, 'role' defines the element type but does not link the title.

❓ selector

expert

Which CSS selector targets only the visible Bootstrap modal dialog?

You want to style only the modal dialog that is currently visible (shown) in Bootstrap 5. Which CSS selector correctly selects it?

A .modal-dialog.active

B .modal-dialog:visible

C .modal.show .modal-dialog

D .modal[aria-hidden="false"] .modal-dialog

💡 Hint

Bootstrap adds the 'show' class to visible modals.

Bootstrap adds the 'show' class to the modal container when visible. The selector '.modal.show .modal-dialog' targets the dialog inside a visible modal. ':visible' is not a valid CSS selector, '.active' is not used by Bootstrap for modals, and 'aria-hidden' is a string attribute but not reliable for CSS selection.

Practice

1. What attribute do you add to a button to open a Bootstrap modal when clicked?

easy

A. modal-open

B. data-toggle="modal"

C. data-bs-toggle="modal"

D. open-modal

Solution

1. Step 1: Understand Bootstrap modal trigger attributes

   Bootstrap requires data-bs-toggle="modal" on the trigger element to activate modal functionality.

2. Step 2: Compare options with Bootstrap docs

   Only data-bs-toggle="modal" uses the correct Bootstrap 5+ attribute syntax for toggling modals.

3. Final Answer:

   data-bs-toggle="modal" -> Option C

4. Quick Check:

   Modal trigger attribute = data-bs-toggle="modal" [OK]

Hint: Look for data-bs-toggle="modal" on buttons to open modals [OK]

Common Mistakes:

• Using old Bootstrap 4 attribute data-toggle instead of data-bs-toggle
• Using class names instead of data attributes
• Forgetting the data-bs-toggle attribute

2. Which of the following is the correct way to specify the target modal in a button?

easy

A. data-bs-target="#modalExample"

B. target="#modalExample"

C. data-target="#modalExample"

D. data-bs-target="modalExample"

Solution

1. Step 1: Identify the correct attribute for modal target

   Bootstrap uses data-bs-target with a CSS selector to specify which modal to open.

2. Step 2: Confirm the selector format

   The value must be an ID selector starting with #, so #modalExample is correct.

3. Final Answer:

   data-bs-target="#modalExample" -> Option A

4. Quick Check:

   Modal target attribute = data-bs-target="#id" [OK]

Hint: Use data-bs-target="#modalID" with # for modal ID [OK]

Common Mistakes:

• Omitting the # in the target selector
• Using data-target instead of data-bs-target
• Using just the modal ID without #

3. Given this HTML snippet, what will happen when the button is clicked?

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Open</button>

<div class="modal fade" id="myModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">Content here</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

medium

A. The modal with title and content appears on top of the page

B. Nothing happens because the modal is missing the show class

C. The page reloads because the button has no type

D. An error appears because aria-hidden is true

Solution

1. Step 1: Check button attributes for modal trigger

   The button has data-bs-toggle="modal" and data-bs-target="#myModal", so it triggers the modal with ID myModal.

2. Step 2: Understand modal structure and behavior

   The modal has correct structure and Bootstrap JS will add the show class dynamically to display it. aria-hidden="true" is default and toggled automatically.

3. Final Answer:

   The modal with title and content appears on top of the page -> Option A

4. Quick Check:

   Modal triggers show modal content on click [OK]

Hint: Modal shows on click if data-bs-toggle and data-bs-target are correct [OK]

Common Mistakes:

• Thinking modal needs show class initially
• Confusing aria-hidden attribute as an error
• Assuming button reloads page without type="button"

4. Identify the error in this modal trigger button code:

<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="myModal">Open</button>

medium

A. Button missing type="button" attribute

B. Missing # in data-bs-target value

C. data-bs-toggle should be data-toggle

D. Button must be inside the modal

Solution

1. Step 1: Check data-bs-target attribute format

   The value must be a CSS selector with # for ID. Here it is missing the # before myModal.

2. Step 2: Verify other attributes

   Button type="button" is recommended but not an error. data-bs-toggle is correct for Bootstrap 5+. Button can be outside modal.

3. Final Answer:

   Missing # in data-bs-target value -> Option B

4. Quick Check:

   Modal target needs #id selector [OK]

Hint: Always prefix modal ID with # in data-bs-target [OK]

Common Mistakes:

• Omitting # in data-bs-target
• Confusing Bootstrap 4 and 5 attribute names
• Thinking button must be inside modal

5. You want a modal that opens when a link is clicked and closes when the user presses Escape or clicks outside. Which is the correct minimal setup for the link and modal?

hard

A. <button data-bs-toggle="modal" data-bs-target="#myModal">Open</button> and modal with data-bs-keyboard="false"

B. <a href="#myModal" data-toggle="modal">Open</a> and modal with tabindex="0"

C. <a href="#" data-bs-toggle="modal" data-bs-target="myModal">Open</a> and modal with tabindex="-1" only

D. <a href="#" data-bs-toggle="modal" data-bs-target="#myModal">Open</a> and modal with tabindex="-1" and data-bs-backdrop="true"

Solution

1. Step 1: Confirm trigger element setup

   Using an anchor with href="#", data-bs-toggle="modal", and data-bs-target="#myModal" correctly triggers the modal.

2. Step 2: Check modal attributes for accessibility and behavior

   Modal needs tabindex="-1" for focus management and data-bs-backdrop="true" (default) to close on outside click and Escape key.

3. Final Answer:

   Anchor with data-bs-toggle and data-bs-target plus modal with tabindex="-1" and data-bs-backdrop="true" -> Option D

4. Quick Check:

   Modal triggers + tabindex + backdrop enable open/close [OK]

Hint: Use tabindex="-1" and data-bs-backdrop="true" for modal accessibility [OK]

Common Mistakes:

• Using data-toggle instead of data-bs-toggle
• Missing tabindex="-1" on modal
• Disabling keyboard with data-bs-keyboard="false" prevents Escape close