Scrollable and centered modals in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the modal vertically centered.

Bootsrap

<div class="modal-dialog [1]">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Centered Modal</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
      <p>This modal is vertically centered.</p>
    </div>
  </div>
</div>

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

Amodal-dialog-centered

Bmodal-dialog-scrollable

Cmodal-content-centered

Dmodal-centered

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'modal-dialog-scrollable' instead of 'modal-dialog-centered'.

Adding 'modal-centered' which is not a valid Bootstrap class.

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

2fill in blank

medium

Complete the code to make the modal body scrollable when content is long.

Bootsrap

<div class="modal-dialog [1]">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Scrollable Modal</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
      <p>Lots of content here...</p>
      <!-- Imagine many paragraphs here -->
    </div>
  </div>
</div>

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

Amodal-scrollable

Bmodal-dialog-scrollable

Cmodal-body-scrollable

Dmodal-dialog-centered

Attempts:

3 left

💡 Hint

Common Mistakes

Adding scrollable class to modal-body instead of modal-dialog.

Using 'modal-scrollable' which is not a Bootstrap class.

The class 'modal-dialog-scrollable' is added to the modal-dialog div to make the body scrollable.

3fill in blank

hard

Fix the error in the modal code to make it scrollable and centered.

Bootsrap

<div class="modal-dialog [1] [2]">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Scrollable & Centered Modal</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
      <p>Content that requires scrolling...</p>
    </div>
  </div>
</div>

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

Amodal-dialog-scrollable

Bmodal-dialog-centered

Cmodal-content-scrollable

Dmodal-scrollable

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'modal-content-scrollable' which is not a valid class.

Adding scrollable class to modal-content instead of modal-dialog.

To have a modal both scrollable and vertically centered, add both 'modal-dialog-scrollable' and 'modal-dialog-centered' classes to the modal-dialog div.

4fill in blank

hard

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

Bootsrap

<div class="modal-dialog [1] [2]">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Modal Title</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
      <p>Scrollable content here...</p>
    </div>
  </div>
</div>

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

Amodal-dialog-scrollable

Bmodal-dialog-centered

Cmodal-content-scrollable

Dmodal-scrollable

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'modal-content-scrollable' which is invalid.

Adding scrollable class to modal-content instead of modal-dialog.

The modal-dialog needs both 'modal-dialog-scrollable' for scroll and 'modal-dialog-centered' for vertical centering.

5fill in blank

hard

Fill all three blanks to create a scrollable, vertically centered modal with a proper header and close button.

Bootsrap

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog [1] [2]">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">[3]</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Scrollable and centered modal content.</p>
      </div>
    </div>
  </div>
</div>

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

Amodal-dialog-scrollable

Bmodal-dialog-centered

CScrollable & Centered Modal

Dmodal-content-scrollable

Attempts:

3 left

💡 Hint

Common Mistakes

Putting scrollable class on modal-content instead of modal-dialog.

Leaving the modal title blank or using invalid class names.

Add 'modal-dialog-scrollable' and 'modal-dialog-centered' to modal-dialog for scroll and center. The modal title text goes in the modal-title heading.