# Modal

###### Modal dialogs for lightboxes, user notifications, or completely custom content

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.

##### Modal Small

This is the content area of the modal.

##### Modal Default

This is the content area of the modal.

##### Modal Large

This is the content area of the modal.

##### Modal XL

This is the content area of the modal.

##### Modal Small Center

This is the content area of the modal.

##### Modal Center

This is the content area of the modal.

##### Modal Large Center

This is the content area of the modal.

##### Modal XL Center

This is the content area of the modal.

##### 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.

##### Modal End

This is the content area of the modal.

##### Modal End Small

This is the content area of the modal.

##### Modal End Large

This is the content area of the modal.

##### Modal End XL

This is the content area of the modal.

##### Modal Start

This is the content area of the modal.

##### Modal Start Small

This is the content area of the modal.

##### Modal Start Large

This is the content area of the modal.

##### Modal Start XL

This is the content area of the modal.
This is the content area of the modal.
This is the content area of the modal.

##### 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

# Full screen modal

Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a `.modal-dialog`.

Class | Availability
--- | ---
`.modal-fullscreen` | Always
`.modal-fullscreen-sm-down` | `576px`
`.modal-fullscreen-md-down` | `768px`
`.modal-fullscreen-lg-down` | `992px`
`.modal-fullscreen-xl-down` | `1200px`
`.modal-fullscreen-xxl-down` | `1400px`

##### Alert

#####
Big Modal Alert

Warning: With a bold stern warning message to get your attention.

##### Modal title

We use bootstrap utilities to create a cutomized alert modal

##### No backdrops

##### Modal title

Notice how there is no backdrop to this modal.

##### Static backdrop

##### Modal Static Backdrop

Notice how there is a static backdrop to this modal.

## Transparent Modal (Tinted)

Give modals a 'transparent tinted glass' feel using only utility classes.
This is the content area of the modal.
This is the content area of the modal.

#### Transparent End Below is a static modal example

This is the content area of the modal.

##### Large start side modal

This is the content area of the modal.

#### Transparent Centered Below is a static modal example

This is the content area of the modal.

#### Transparent Default Below is a static modal example

This is the content area of the modal.

##### Default

##### Start & End

##### Top & Bottom

#### Hi Sunny,

how can I help you today?
Analyze my data

Create a new report

Summarize my Calendar

App Builder
Unlock limitless design potential with 16+ layout combinations and extensive customization options—tailor your dashboard to fit your exact needs.
Header position fixed
Navigation full height
Navigation position fixed
Navigation collapsed
Navigation Minified
Dark Navigation
Colorblind Mode
High Contrast Mode