Modals are a JavaScript driven component that is default to the Bootstrap framework. In Material Admin Pro, we have taken the styling from Material's dialog component and applied the same principles to the Bootstrap defaults, creating a customized Modal component.

Default Modals

Modals are togglable dialogs that inform users of actions or events that have taken place. In this theme, the modal default animates in with a zoom in effect over a darkened backdrop.

The modal header, body, and footer have also been modified outside of Bootstrap to match the Material Design style, which includes our text button components as the action buttons in the modal footer.

Click on the button below to see this theme's default modal component in action.

Scrollable Modals

The scrollable modal allows for content in the modal that exceeds the height of the viewport. In this example, we use Bootstrap's .modal-dialog-scrollable class on the modal dialog with custom styling applied to add borders to the header and footer, matching Material Design's style specifications.

Centering Modals

In Material Design, dialogs are vertially centered by default. To acheive this, simple add the .modal-dialog-centered class to the modal dialog and the dialog will be centered after it animates in.

Static Backdrop Modals

By default, modals will dismiss when clicking outside of the modal dialog. This behavior can be disabled by adding the data-bs-backdrop="static" and data-bs-keyboard="false" data attributes to the modal element, demonstrated below.

Modal Sizing Options

Append the modal dialog class with either the .modal-xl , .modal-lg , or .modal-sm class for sizing options other than the default.

Full Screen Modal

A final sizing option available is the full screen modal. Add the .modal-fullscreen class to the modal dialog to use this variant. There are also responsive options available for full screen modals, which you can see on Bootstrap's modal documentation page.

Note: In the examples above, the modals are called using data attributes. Bootstrap's modals work with a combination of HTML, CSS, and JavaScript, and there are JavaScript implementation options available that you can reference on Bootstrap's modal documentation page.

Related Links