Modal sizes and positioning in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the modal size to large using Bootstrap classes.

Bootsrap

<div class="modal-dialog [1]">
  <div class="modal-content">
    <!-- Modal content here -->
  </div>
</div>

Drag options to blanks, or click blank then click option'

Amodal-sm

Bmodal-lg

Cmodal-xl

Dmodal-md

Attempts:

3 left

💡 Hint

Common Mistakes

Using modal-sm which makes the modal small.

Using modal-md which is not a valid Bootstrap modal size class.

The class modal-lg makes the modal large in Bootstrap.

2fill in blank

medium

Complete the code to center the modal vertically on the screen.

Bootsrap

<div class="modal-dialog [1]">
  <div class="modal-content">
    <!-- Modal content here -->
  </div>
</div>

Drag options to blanks, or click blank then click option'

Amodal-dialog-centered

Bmodal-dialog-scrollable

Cmodal-dialog-fixed

Dmodal-dialog-static

Attempts:

3 left

💡 Hint

Common Mistakes

Using modal-dialog-scrollable which makes the modal body scrollable.

Using modal-dialog-static which is not a valid Bootstrap class.

The class modal-dialog-centered centers the modal vertically in Bootstrap.

3fill in blank

hard

Fix the error in the modal size class to make the modal extra large.

Bootsrap

<div class="modal-dialog [1]">
  <div class="modal-content">
    <!-- Modal content here -->
  </div>
</div>

Drag options to blanks, or click blank then click option'

Amodal-lg

Bmodal-extra

Cmodal-xxl

Dmodal-xl

Attempts:

3 left

💡 Hint

Common Mistakes

Using modal-xxl which is not a valid Bootstrap modal size class.

Using modal-extra which does not exist.

The correct class for extra large modals in Bootstrap is modal-xl.

4fill in blank

hard

Fill both blanks to create a scrollable and vertically centered modal.

Bootsrap

<div class="modal-dialog [1] [2]">
  <div class="modal-content">
    <!-- Modal content here -->
  </div>
</div>

Drag options to blanks, or click blank then click option'

Amodal-dialog-scrollable

Bmodal-dialog-centered

Cmodal-dialog-fixed

Dmodal-dialog-static

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid classes like modal-dialog-fixed or modal-dialog-static.

Mixing up the order of classes does not affect functionality but ensure both are present.

Use modal-dialog-scrollable to make the modal body scrollable and modal-dialog-centered to center it vertically.

5fill in blank

hard

Fill all three blanks to create a small, scrollable, and vertically centered modal.

Bootsrap

<div class="modal-dialog [1] [2] [3]">
  <div class="modal-content">
    <!-- Modal content here -->
  </div>
</div>

Drag options to blanks, or click blank then click option'

Amodal-sm

Bmodal-dialog-scrollable

Cmodal-dialog-centered

Dmodal-lg

Attempts:

3 left

💡 Hint

Common Mistakes

Using modal-lg instead of modal-sm for size.

Omitting either scrollable or centered classes.

Use modal-sm for a small modal, modal-dialog-scrollable for scrollable content, and modal-dialog-centered to center it vertically.