Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the body so that modal content scrolls instead. Bootstrap only supports one modal window at a time. Nested modals aren't supported as it is believed to be poor user experiences. Modals use position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You'll likely run into issues when nesting a .modal within another fixed element

Find in-depth, guidelines, tutorials and more on Bootstrap Modals's at the official documentation.

Basic Modals

Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
Default
Centered

Side Modals

Modals can be positioned on different sides of the page using modifier classes like .modal-dialog-start, .modal-dialog-end, .modal-dialog-top, and .modal-dialog-bottom on .modal-dialog. These side modals also support size classes.
End
Start
Top & Bottom

Modifications for modals

Modal fullscreen uses combination of utility classes and the modifier class .modal-fullscreen. Using the modifer class .modal-backdrop-transparent makes the backdrop transparent. You can also translate the modals to cast as an alert by using the modifier class .modal-alert
Fullscreen
Alert
No backdrops
Static backdrop

Transparent Modal (Tinted)

Give modals a 'transparent tinted glass' feel using only utility classes.
Default
Start & End
Top & Bottom