Modal

A Modal is a popup or dialog box that appears over the current page content.

How to Make a Popup Modal

This example shows how to create a basic modal popup.

Output:

Add animation

Use the.fade class to add a fading effect when opening and closing the modal:

Output:

Modal Size

You can resize the modal by adding .modal-sm for a small (300px max), .modal-lg for a large (800px max), or .modal-xl for an extra-large (1140px max) modal. If no size is specified, the default width is 500px.

Place the size class on the <div> that has the .modal-dialog class

Small Modal

Output:

Large Modal

Output:

Extra Large Modal

Output:

Fullscreen Modals

To make the modal cover the entire width and height of the page, apply the .modal-fullscreen class

Output:

Responsive Fullscreen Modals

You can also set the modal to enter fullscreen mode at specific breakpoints using the .modal-fullscreen-*-* classes

Class	Description
`.modal-fullscreen-sm-down`	Applies fullscreen modal on screens smaller than 576px
`.modal-fullscreen-md-down`	Applies fullscreen modal on screens smaller than 768px
`.modal-fullscreen-lg-down`	Applies fullscreen modal on screens smaller than 992px
`.modal-fullscreen-xl-down`	Applies fullscreen modal on screens smaller than 1200px
`.modal-fullscreen-xxl-down`	Applies fullscreen modal on screens smaller than 1400px

Centered Modal

Use the .modal-dialog-centered class to align the modal both vertically and horizontally in the center of the page.

Output:

Scrolling Modal

If the modal contains a large amount of content, a scrollbar will appear on the page. Refer to the examples below for clarity.