Scrollable and centered modals in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual result of this Bootstrap modal code?

Given the following Bootstrap modal code, what will the user see when the modal is opened?

Bootsrap

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
    <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">
        <p>Line 1</p>
        <p>Line 2</p>
        <p>Line 3</p>
        <p>Line 4</p>
        <p>Line 5</p>
        <p>Line 6</p>
        <p>Line 7</p>
        <p>Line 8</p>
        <p>Line 9</p>
        <p>Line 10</p>
        <p>Line 11</p>
        <p>Line 12</p>
        <p>Line 13</p>
        <p>Line 14</p>
        <p>Line 15</p>
      </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 modal box appears centered vertically and horizontally with a scrollable body showing lines 1 to 15 inside the modal body area.

B A modal box appears at the top of the page with all lines 1 to 15 visible without scrolling.

C A modal box appears centered but the body is not scrollable, so only lines 1 to 5 are visible and the rest are cut off.

D A modal box appears at the bottom of the page with a fixed height and no scroll.

💡 Hint

Look at the classes on the modal-dialog div: modal-dialog-scrollable and modal-dialog-centered.

The modal-dialog-centered class centers the modal vertically in the viewport. The modal-dialog-scrollable class makes the modal body scrollable if content is too long. So the modal appears centered and the body scrolls to show all lines.

🧠 Conceptual

intermediate

Which Bootstrap class makes the modal body scrollable?

You want a modal with a long content body that scrolls inside the modal instead of expanding the modal height. Which class should you add to the modal dialog?

A modal-dialog-scrollable

B modal-dialog-centered

C modal-content-scroll

D modal-body-scroll

💡 Hint

The class is added to the modal-dialog div, not modal-content or modal-body.

The modal-dialog-scrollable class enables scrolling inside the modal body when content is long. Other classes control positioning or do not exist.

📝 Syntax

advanced

What error occurs if you forget the modal-dialog wrapper div inside a Bootstrap modal?

Consider this modal structure missing the modal-dialog div: <div class="modal fade" id="myModal" tabindex="-1" aria-hidden="true"> <div class="modal-content"> <div class="modal-header">...</div> <div class="modal-body">...</div> </div> </div> What happens when you try to open this modal?

A The modal content is hidden and cannot be seen.

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

C The modal opens normally with no visible difference.

D The modal does not appear centered and the scrollable behavior does not work properly.

💡 Hint

Bootstrap requires a specific structure for modals to work correctly.

The modal-dialog div is required to apply positioning and scrolling styles. Without it, the modal content is not centered and scroll behavior breaks, but no JS error occurs.

❓ accessibility

advanced

Which attribute improves accessibility for Bootstrap modals?

To make a Bootstrap modal accessible for screen readers, which attribute is essential on the modal container?

A aria-hidden="true" on the modal dialog

B tabindex="0" on the modal body

C aria-labelledby with the id of the modal title element

D role="button" on the modal footer buttons

💡 Hint

This attribute connects the modal container to its title for screen readers.

The aria-labelledby attribute on the modal container points to the modal title's id. This helps screen readers announce the modal's purpose when it opens.

❓ layout

expert

How does Bootstrap center a modal vertically using Flexbox?

Bootstrap uses Flexbox to center modals vertically. Which CSS property on the .modal-dialog or its parent achieves vertical centering?

A display: block; margin: auto; height: 100%;

B display: flex; align-items: center; min-height: 100vh;

C position: absolute; top: 50%; transform: translateY(-50%);

D display: grid; place-items: center center; height: 100vh;

💡 Hint

Bootstrap modal container uses flexbox with vertical alignment.

Bootstrap sets the modal container to display: flex and uses align-items: center to vertically center the modal dialog. The container also has min-height: 100vh to fill the viewport height.