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 also be positioned to the side of the page. Therefore the modifier classes .modal-dialog-left, .modal-dialog-right, .modal-dialog-bottom, .modal-dialog-top can be placed on a .modal-dialog. These side modals are compatible with the sizes classes.
Right
Left
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

Transparent Modal (Tinted)

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