0
0
Bootsrapmarkup~20 mins

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

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Modal Mastery
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ rendering
intermediate
2:00remaining
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>
AThe modal will be fullscreen covering the entire viewport.
BThe modal will be large width (modal-lg) with wider content area.
CThe modal will be small width (modal-sm) with narrow content area.
DThe modal will have default medium width with normal content area.
Attempts:
2 left
💡 Hint
Look at the class inside the modal-dialog div.
🧠 Conceptual
intermediate
2:00remaining
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?
AAdd class 'modal-dialog-centered' to modal-dialog.
BAdd class 'modal-centered' to modal-dialog.
CAdd class 'modal-vertical-center' to modal-dialog.
DAdd class 'modal-center' to modal-dialog.
Attempts:
2 left
💡 Hint
Bootstrap uses a specific naming pattern for vertical centering modals.
📝 Syntax
advanced
2:00remaining
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>
AThe modal will be fullscreen only on small screens and smaller, normal on larger screens.
BThe modal will cause a syntax error and not open.
CThe modal will always be fullscreen on all screen sizes.
DThe modal will be fullscreen only on large screens and bigger.
Attempts:
2 left
💡 Hint
Check the meaning of 'modal-fullscreen-sm-down' class in Bootstrap docs.
❓ selector
advanced
2:00remaining
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
Attempts:
2 left
💡 Hint
Remember the modal-dialog-centered class is on the modal-dialog div, and modal-content is inside it.
❓ accessibility
expert
2:00remaining
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?
Aaria-modal
Baria-hidden
Caria-labelledby
Daria-describedby
Attempts:
2 left
💡 Hint
This attribute links the modal to its title for screen readers.