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.

Practice

1. What does the Bootstrap class modal-dialog-scrollable do in a modal?

easy

A. Disables modal animations

B. Makes the modal content scrollable inside the popup

C. Changes the modal background color

D. Centers the modal vertically on the screen

Solution

1. Step 1: Understand the class purpose

   The class modal-dialog-scrollable is designed to allow the modal content area to scroll if the content is too long.

2. Step 2: Compare with other classes

   Unlike modal-dialog-centered which centers the modal, this class specifically controls scrolling inside the modal.

3. Final Answer:

   Makes the modal content scrollable inside the popup -> Option B

4. Quick Check:

   modal-dialog-scrollable = scrollable content [OK]

Hint: Scrollable modals use modal-dialog-scrollable class [OK]

Common Mistakes:

• Confusing scrollable with centered behavior
• Thinking it changes modal size
• Assuming it affects modal background

2. Which is the correct way to add both scrollable and vertically centered behavior to a Bootstrap modal dialog?

easy

A. <div class='modal-dialog modal-dialog-scrollable modal-dialog-centered'>

B. <div class='modal-dialog scrollable-centered'>

C. <div class='modal-dialog scrollable centered'>

D. <div class='modal-dialog scrollable centered-modal'>

Solution

1. Step 1: Identify correct Bootstrap classes

   Bootstrap uses modal-dialog-scrollable and modal-dialog-centered as separate classes to add scroll and vertical centering.

2. Step 2: Check syntax for multiple classes

   Multiple classes are added separated by spaces inside the class attribute, so both classes must be included exactly as documented.

3. Final Answer:

   <div class='modal-dialog modal-dialog-scrollable modal-dialog-centered'> -> Option A

4. Quick Check:

   Use both classes separated by space [OK]

Hint: Use both classes separated by spaces inside class attribute [OK]

Common Mistakes:

• Using incorrect class names like 'scrollable' or 'centered'
• Combining classes into one word
• Missing one of the required classes

3. Given this modal HTML snippet, what will be the visual effect?

<div class='modal-dialog modal-dialog-scrollable modal-dialog-centered'>
  <div class='modal-content'>
    <div class='modal-body'>
      <p>Very long content here...</p>
    </div>
  </div>
</div>

medium

A. Modal is centered but content does not scroll

B. Modal content scrolls but modal is aligned to top

C. Modal content scrolls inside and modal is vertically centered on screen

D. Modal neither scrolls nor centers vertically

Solution

1. Step 1: Analyze classes used

   The modal uses both modal-dialog-scrollable and modal-dialog-centered classes.

2. Step 2: Understand combined effect

   These classes together make the modal vertically centered and allow the modal body content to scroll if it is long.

3. Final Answer:

   Modal content scrolls inside and modal is vertically centered on screen -> Option C

4. Quick Check:

   Both scrollable and centered classes active = scroll + center [OK]

Hint: Both classes together scroll content and center modal [OK]

Common Mistakes:

• Assuming scroll disables centering
• Thinking content scrolls outside modal
• Confusing modal-body scrolling with page scrolling

4. You added modal-dialog-scrollable but the modal content is not scrolling. What is the likely mistake?

medium

A. You forgot to add modal-dialog-centered

B. You must add scrollable class instead

C. You need to add overflow-auto to modal-content

D. You placed modal-dialog-scrollable on the wrong element

Solution

1. Step 1: Check where the class is applied

   The modal-dialog-scrollable class must be on the modal-dialog element, not on modal-content or others.

2. Step 2: Understand Bootstrap structure

   If placed incorrectly, the scroll behavior won't activate because Bootstrap styles target the dialog container.

3. Final Answer:

   You placed modal-dialog-scrollable on the wrong element -> Option D

4. Quick Check:

   modal-dialog-scrollable must be on modal-dialog [OK]

Hint: Apply scrollable class only on modal-dialog div [OK]

Common Mistakes:

• Adding scrollable to modal-content instead
• Confusing scrollable with centered class
• Forgetting to add modal-dialog class

5. You want a modal that is vertically centered, scrollable, and also has a fixed header and footer that stay visible while the body scrolls. Which Bootstrap structure and classes should you use?

hard

A. Use modal-dialog modal-dialog-scrollable modal-dialog-centered with modal-header, modal-body, and modal-footer inside modal-content

B. Use modal-dialog modal-dialog-centered only and add custom CSS for scrolling

C. Use modal-dialog-scrollable on modal-content and add fixed position to header/footer

D. Use modal-dialog modal-dialog-scrollable but omit modal-header and modal-footer

Solution

1. Step 1: Identify required classes for scroll and center

   Use both modal-dialog-scrollable and modal-dialog-centered on the modal-dialog element.

2. Step 2: Structure modal content properly

   Inside modal-content, include modal-header and modal-footer which remain fixed, while modal-body scrolls.

3. Step 3: Confirm Bootstrap default behavior

   Bootstrap automatically keeps header and footer visible when using scrollable modals with this structure.

4. Final Answer:

   Use modal-dialog modal-dialog-scrollable modal-dialog-centered with modal-header, modal-body, and modal-footer inside modal-content -> Option A

5. Quick Check:

   Combine scrollable + centered + header/footer structure [OK]

Hint: Use both classes on modal-dialog and include header/footer inside modal-content [OK]

Common Mistakes:

• Adding scrollable to modal-content instead of modal-dialog
• Omitting modal-header or modal-footer
• Trying to fix header/footer with custom CSS unnecessarily