Modal sizes and positioning in Bootsrap - Browser Rendering Trace

Render Flow - Modal sizes and positioning

Load HTML with modal markup

↓

Parse modal container and dialog

↓

Apply Bootstrap modal classes

↓

Calculate modal size based on size class

↓

Calculate modal position based on centering classes

↓

Render backdrop overlay

↓

Paint modal and backdrop

↓

Composite modal on top of page content

The browser reads the modal HTML, applies Bootstrap size and positioning classes, calculates the modal's width and vertical/horizontal position, then paints the modal with a backdrop overlay on top of the page content.

Render Steps - 3 Steps

Code Added:<div class="modal fade" id="exampleModal"> ... </div>

Before

[Page content visible]

(No modal visible)

→

After

[Page content visible]

(Modal container added but hidden, no visual change)

The modal container is added to the DOM but is hidden by default with 'fade' and 'modal' classes.

🔧 Browser Action:Creates modal DOM nodes, applies initial hidden styles

Code Sample

A large modal that is vertically centered on the screen with a backdrop overlay.

Bootsrap

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

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Large Centered Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Modal content goes here.
      </div>
    </div>
  </div>
</div>

Render Quiz - 3 Questions

After applying step 2, how is the modal positioned on the screen?

A Centered horizontally but aligned to the bottom vertically

B Aligned to the top left with default width

C Centered vertically and horizontally with a large width

D Full screen covering entire viewport

Common Confusions - 3 Topics

Why doesn't my modal appear centered vertically?

You need to add the class 'modal-dialog-centered' to the modal-dialog div to vertically center the modal. Without it, the modal aligns to the top by default (see render_step 2).

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

Why is my modal too narrow or too wide?

Bootstrap modal sizes depend on classes like 'modal-sm', 'modal-lg', or 'modal-xl' on the modal-dialog. Without these, the modal uses default width (render_step 2).

💡 Use size classes on modal-dialog to control modal width.

Why can't I scroll inside the modal if content is long?

You need 'modal-dialog-scrollable' class on modal-dialog to make the modal body scrollable. Otherwise, the modal grows and may overflow the viewport.

💡 Add 'modal-dialog-scrollable' for scrollable modal body.

Property Reference

Property/Class	Value/Example	Effect on Modal	Common Use
modal-sm	class="modal-sm"	Makes modal smaller width	Use for small dialogs or alerts
modal-lg	class="modal-lg"	Makes modal larger width	Use for more content or forms
modal-xl	class="modal-xl"	Extra large modal width	Use for very wide content
modal-dialog-centered	class="modal-dialog-centered"	Vertically centers modal on screen	Better user focus and aesthetics
modal-dialog-scrollable	class="modal-dialog-scrollable"	Makes modal body scrollable if content is tall	For long content without growing modal height
fade	class="fade"	Adds fade-in/out animation on show/hide	Smooth modal appearance
modal-backdrop	auto-generated	Backdrop overlay behind modal	Focus user on modal, dim background

Concept Snapshot

Bootstrap modals use size classes like modal-sm, modal-lg, modal-xl on the modal-dialog to control width. Vertical centering is done with modal-dialog-centered class. Modal content goes inside modal-content with header, body, and footer. Backdrop overlay dims background and focuses user on modal. Without size classes, modal uses default width and aligns to top. Use modal-dialog-scrollable for scrollable modal body if content is tall.