Modal sizes and positioning in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What class in Bootstrap controls the size of a modal?

Bootstrap uses classes like modal-sm, modal-lg, and modal-xl on the .modal-dialog element to control modal sizes.

beginner

How do you center a Bootstrap modal vertically?

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

intermediate

Which Bootstrap class makes a modal full screen on all devices?

Use the class modal-fullscreen on the .modal-dialog element to make the modal cover the entire screen.

beginner

What is the default horizontal alignment of a Bootstrap modal?

By default, Bootstrap modals are horizontally centered in the viewport without extra classes.

intermediate

How can you make a modal scrollable if its content is too tall?

Add the class modal-dialog-scrollable to the .modal-dialog element to enable vertical scrolling inside the modal body.

Which class would you add to make a Bootstrap modal larger than the default size?

A modal-lg

B modal-center

C modal-small

D modal-fullscreen

The class modal-lg makes the modal larger than the default size.

How do you vertically center a Bootstrap modal?

A Add <code>modal-center</code> to <code>.modal</code>

B Add <code>modal-dialog-centered</code> to <code>.modal-dialog</code>

C Add <code>centered</code> to <code>.modal-content</code>

D Add <code>modal-vertical</code> to <code>.modal-dialog</code>

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

Which class makes a Bootstrap modal take up the entire screen?

A modal-lg

B modal-xl

C modal-fullscreen

D modal-scrollable

modal-fullscreen makes the modal cover the full screen.

If modal content is too tall, which class helps to scroll inside the modal?

A modal-dialog-scrollable

B modal-scroll

C modal-scrollbar

D modal-content-scroll

Use modal-dialog-scrollable to enable scrolling inside the modal.

What is the default horizontal alignment of Bootstrap modals?

A Top aligned

B Aligned left

C Aligned right

D Centered horizontally

Bootstrap modals are horizontally centered by default.

Explain how to change the size of a Bootstrap modal and give examples of classes used.

Think about classes added to the modal dialog to control width.

Describe how to position a Bootstrap modal vertically centered and how to handle tall content inside it.

Consider classes that affect vertical alignment and scrolling.