Modal sizes and positioning in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What size will this Bootstrap modal have?

Given the following modal HTML code, what size will the modal be when opened?

<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Large Modal</h5>
      </div>
      <div class="modal-body">Content here</div>
    </div>
  </div>
</div>

Bootsrap

<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Large Modal</h5>
      </div>
      <div class="modal-body">Content here</div>
    </div>
  </div>
</div>

A The modal will be fullscreen covering the entire viewport.

B The modal will be large width (modal-lg) with wider content area.

C The modal will be small width (modal-sm) with narrow content area.

D The modal will have default medium width with normal content area.

💡 Hint

Look at the class inside the modal-dialog div.

The class 'modal-lg' on the modal-dialog sets the modal width to large size in Bootstrap.

🧠 Conceptual

intermediate

How to center a Bootstrap modal vertically?

Which class should you add to the modal-dialog div to vertically center the modal on the screen?

A Add class 'modal-dialog-centered' to modal-dialog.

B Add class 'modal-centered' to modal-dialog.

C Add class 'modal-vertical-center' to modal-dialog.

D Add class 'modal-center' to modal-dialog.

💡 Hint

Bootstrap uses a specific naming pattern for vertical centering modals.

The correct Bootstrap class to vertically center a modal is 'modal-dialog-centered'.

📝 Syntax

advanced

What error occurs with this modal code?

What error or problem will happen if you use this modal HTML?

<div class="modal fade" id="myModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen-sm-down">
    <div class="modal-content">
      <div class="modal-header">Header</div>
      <div class="modal-body">Body</div>
    </div>
  </div>
</div>

Bootsrap

<div class="modal fade" id="myModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen-sm-down">
    <div class="modal-content">
      <div class="modal-header">Header</div>
      <div class="modal-body">Body</div>
    </div>
  </div>
</div>

A The modal will be fullscreen only on small screens and smaller, normal on larger screens.

B The modal will cause a syntax error and not open.

C The modal will always be fullscreen on all screen sizes.

D The modal will be fullscreen only on large screens and bigger.

💡 Hint

Check the meaning of 'modal-fullscreen-sm-down' class in Bootstrap docs.

The class 'modal-fullscreen-sm-down' makes the modal fullscreen on small screens and smaller, normal on medium and larger.

❓ selector

advanced

Which CSS selector targets only the modal content inside a centered modal?

You want to style the modal content only when the modal is vertically centered. Which CSS selector is correct?

A .modal-dialog-centered > .modal-content

B .modal-content.modal-dialog-centered

C .modal-dialog .modal-content.modal-centered

D .modal-dialog-centered .modal-content

💡 Hint

Remember the modal-dialog-centered class is on the modal-dialog div, and modal-content is inside it.

The selector '.modal-dialog-centered .modal-content' selects modal-content inside any element with modal-dialog-centered class.

❓ accessibility

expert

Which ARIA attribute is essential for accessible modals?

For a Bootstrap modal to be accessible, which ARIA attribute must be present on the modal container to describe its label?

A aria-modal

B aria-hidden

C aria-labelledby

D aria-describedby

💡 Hint

This attribute links the modal to its title for screen readers.

The 'aria-labelledby' attribute points to the modal's title element, helping screen readers announce the modal's purpose.

Practice

1. Which Bootstrap class would you add to a modal dialog to make it appear smaller than the default size?

easy

A. modal-centered

B. modal-lg

C. modal-xl

D. modal-sm

Solution

1. Step 1: Understand modal size classes

   Bootstrap provides specific classes to control modal sizes: modal-sm for small, modal-lg for large, and modal-xl for extra large modals.

2. Step 2: Identify the class for smaller modal

   The class modal-sm is used to make the modal smaller than the default size.

3. Final Answer:

   <code>modal-sm</code> -> Option D

4. Quick Check:

   Small modal = modal-sm [OK]

Hint: Small modal uses modal-sm class [OK]

Common Mistakes:

• Using modal-lg or modal-xl for small size
• Confusing modal-centered with size classes
• Not adding any size class and expecting smaller modal

2. Which of the following is the correct way to center a Bootstrap modal vertically on the screen?

easy

A. Add modal-dialog-centered to the modal-dialog div

B. Add centered-modal to the modal div

C. Add modal-center to the modal-content div

D. Add modal-vertical to the modal-dialog div

Solution

1. Step 1: Identify the correct class for vertical centering

   Bootstrap uses the class modal-dialog-centered on the modal-dialog element to vertically center the modal.

2. Step 2: Verify the element to apply the class

   The class must be added to the modal-dialog div, not modal or modal-content.

3. Final Answer:

   Add modal-dialog-centered to the modal-dialog div -> Option A

4. Quick Check:

   Vertical center = modal-dialog-centered on modal-dialog [OK]

Hint: Use modal-dialog-centered on modal-dialog div [OK]

Common Mistakes:

• Adding centering class to wrong modal element
• Using non-existent classes like modal-center
• Confusing modal-dialog-centered with modal size classes

3. What will be the visual size of the modal dialog in this code snippet?

<div class="modal-dialog modal-xl">
  <div class="modal-content">
    <!-- Modal body -->
  </div>
</div>

medium

A. Small modal dialog

B. Default modal dialog size

C. Extra large modal dialog

D. Centered modal dialog

Solution

1. Step 1: Identify the size class used

   The class modal-xl is applied to the modal-dialog div, which sets the modal to extra large size.

2. Step 2: Understand the effect of modal-xl

   This class makes the modal wider than default and large sizes, so the modal will appear extra large on the screen.

3. Final Answer:

   Extra large modal dialog -> Option C

4. Quick Check:

   modal-xl = extra large modal [OK]

Hint: modal-xl class means extra large modal [OK]

Common Mistakes:

• Confusing modal-xl with modal-lg or modal-sm
• Thinking modal-xl centers the modal
• Ignoring the class and assuming default size

4. You want to make a modal vertically centered and large sized. Which of these code snippets correctly applies both features?

A) <div class="modal-dialog modal-lg modal-dialog-centered">
B) <div class="modal-dialog modal-centered modal-lg">
C) <div class="modal-dialog modal-lg-centered">
D) <div class="modal-dialog modal-lg center-dialog">

medium

A. A

B. B

C. C

D. D

Solution

1. Step 1: Check correct Bootstrap classes for size and centering

   The correct classes are modal-lg for large size and modal-dialog-centered for vertical centering.

2. Step 2: Verify the class names and order

   A uses both classes correctly on the modal-dialog div. Other options use incorrect or non-existent classes.

3. Final Answer:

   Option A -> Option A

4. Quick Check:

   modal-lg + modal-dialog-centered = A [OK]

Hint: Combine modal-lg and modal-dialog-centered on modal-dialog [OK]

Common Mistakes:

• Using wrong class names like modal-centered or modal-lg-centered
• Placing classes on wrong elements
• Missing one of the required classes

5. You want to create a responsive modal that is small on mobile, large on tablets, and extra large on desktops, and also vertically centered. Which Bootstrap classes should you apply to the modal-dialog to achieve this?

hard

A. modal-dialog modal-sm modal-lg modal-xl modal-dialog-centered

B. modal-dialog modal-dialog-centered plus custom CSS media queries for sizes

C. modal-dialog modal-dialog-centered modal-sm modal-lg modal-xl

D. modal-dialog modal-dialog-centered modal-sm modal-lg modal-xl with responsive utility classes for each breakpoint

Solution

1. Step 1: Understand Bootstrap modal size classes

   Bootstrap modal size classes like modal-sm, modal-lg, and modal-xl are not responsive by themselves and cannot be combined to change size at different screen widths.

2. Step 2: Identify how to make modal responsive

   To have different modal sizes on different devices, you must use modal-dialog-centered for vertical centering and write custom CSS media queries to adjust modal width responsively.

3. Final Answer:

   modal-dialog modal-dialog-centered plus custom CSS media queries for sizes -> Option B

4. Quick Check:

   Responsive modal sizes require custom CSS + modal-dialog-centered [OK]

Hint: Use modal-dialog-centered plus CSS media queries for responsiveness [OK]

Common Mistakes:

• Trying to combine multiple size classes on modal-dialog
• Assuming Bootstrap size classes are responsive by default
• Not adding vertical centering class