Scrollable and centered modals in Bootsrap - Browser Rendering Trace

Render Flow - Scrollable and centered modals

Load HTML with modal markup

↓

Bootstrap JS initializes modal

↓

Modal overlay and dialog elements created

↓

Apply 'modal-dialog-centered' class

↓

Apply 'modal-dialog-scrollable' class

↓

Calculate viewport height and modal content height

↓

Enable vertical centering and scrolling

↓

Render modal on top of page content

The browser reads the modal HTML, Bootstrap JavaScript sets up the modal overlay and dialog. 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 tall, keeping header and footer fixed.

Render Steps - 3 Steps

Code Added:<div class="modal-dialog">

Before

[Page content]

(No modal visible)

→

After

[Page content]

[Modal overlay covers page]
[Modal dialog box appears at top center]
[Modal content stacked vertically]

Adding the modal-dialog container creates the modal box with default top alignment and overlay behind it.

🔧 Browser Action:Creates new stacking context and modal overlay; triggers reflow to position modal

Code Sample

A Bootstrap modal that is vertically centered and has a scrollable body if content is tall.

Bootsrap

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <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">
        <!-- Long content here -->
      </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>

Render Quiz - 3 Questions

After applying 'modal-dialog-centered' (step 2), where is the modal dialog positioned?

A Vertically centered in the viewport

B Aligned to the top of the viewport

C Aligned to the bottom of the viewport

D Centered horizontally but at the bottom vertically

Common Confusions - 3 Topics

Why doesn't my modal center vertically even with 'modal-dialog-centered'?

Make sure 'modal-dialog-centered' is added to the same element with 'modal-dialog'. If added elsewhere, vertical centering won't work (see render_step 2).

💡 Add 'modal-dialog-centered' to the modal-dialog container to center vertically.

Why does my modal body not scroll even with 'modal-dialog-scrollable'?

The modal body only scrolls if content height exceeds viewport height. If content is short, no scroll appears (see render_step 3).

💡 Add enough content inside modal-body to see scrolling effect.

Why does the modal footer move when scrolling the body?

Without 'modal-dialog-scrollable', the entire modal scrolls including footer. With it, footer stays fixed while body scrolls (render_step 3).

💡 Use 'modal-dialog-scrollable' to keep footer fixed and body scrollable.

Property Reference

Class	Effect	Visual Behavior	Common Use
modal-dialog	Creates modal container	Modal box appears with overlay, top aligned by default	Basic modal structure
modal-dialog-centered	Centers modal vertically	Modal box moves to vertical center of viewport	Better visual focus on modal
modal-dialog-scrollable	Makes modal body scrollable	Modal header/footer fixed; body scrolls if tall	For long modal content

Concept Snapshot

Bootstrap modals use 'modal-dialog' as container. Add 'modal-dialog-centered' to center vertically. Add 'modal-dialog-scrollable' to make body scrollable. Header and footer stay fixed with scrollable body. Modal overlays page content and disables background interaction.