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.