Scrollable and centered modals in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does a scrollable modal in Bootstrap do?

A scrollable modal allows the modal body content to scroll vertically if it is too long, keeping the header and footer fixed and visible.

beginner

How do you center a modal vertically in Bootstrap?

Add the class modal-dialog-centered to the modal-dialog element to vertically center the modal in the viewport.

beginner

Which Bootstrap class makes the modal body scrollable?

The class modal-dialog-scrollable added to modal-dialog makes the modal body scrollable.

intermediate

Why is it important to keep modals accessible when making them scrollable and centered?

Accessibility ensures keyboard users can navigate the modal easily, screen readers can read content properly, and focus is trapped inside the modal until it is closed.

intermediate

What HTML structure is required for a Bootstrap modal to be scrollable and centered?

Use div.modal-dialog.modal-dialog-scrollable.modal-dialog-centered inside div.modal. This combination makes the modal body scrollable and centers the modal vertically.

Which class centers a Bootstrap modal vertically?

A modal-dialog-centered

B modal-scrollable

C modal-center

D modal-vertical

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

To make the modal body scrollable, which class should you add?

A modal-body-scroll

B modal-scrollbar

C modal-scroll

D modal-dialog-scrollable

Adding modal-dialog-scrollable to modal-dialog makes the modal body scrollable.

What happens if modal content is too long without scrollable class?

A Modal body scrolls automatically

B Modal content overflows outside viewport

C Modal closes automatically

D Modal header scrolls instead

Without scrollable class, long content overflows outside the viewport, making it hard to see all content.

Which element should have the scrollable and centered classes?

A div.modal-dialog

B div.modal-content

C div.modal

D div.modal-body

The classes modal-dialog-scrollable and modal-dialog-centered are added to div.modal-dialog.

Why is keyboard focus important in modals?

A To close the modal automatically

B To allow users to scroll the page behind the modal

C To trap focus inside the modal for accessibility

D To disable modal scrolling

Trapping keyboard focus inside the modal ensures users can navigate modal content without losing context.

Explain how to create a Bootstrap modal that is both scrollable and vertically centered.

Think about which element gets the special classes for scroll and center.

Describe why accessibility matters when designing scrollable and centered modals.

Consider users who rely on keyboard or screen readers.