This is your modal content
This modal is already centered. That means that it will always be applied to the center of your screen.
You can customize the maximum width of this modal. To do that, make the following:
Switch to the "Modal dialog" container;
Open the "Advanced" tab and add one of the following classes:
modal-sm
to set maximum width less than 300px;
modal-lg
to set maximum width less than 800px;
modal-xl
to set maximum width less than 1140px;
The default maximum with is 500px.
You can also make the modal fullscreen sized. These classes will do that:
modal-fullscreen
- the modal is always fullscreen sized;
modal-fullscreen-sm-down
- the modal is in fullscreen mode only if the screen size is below the "SM" breakpoint (less than 576px);
modal-fullscreen-md-down
- the modal is in fullscreen mode only if the screen size is below the "MD" breakpoint (less than 768px);
modal-fullscreen-lg-down
- the modal is in fullscreen mode only if the screen size is below the "LG" breakpoint (less than 992px);
modal-fullscreen-xl-down
- the modal is in fullscreen mode only if the screen size is below the "XL" breakpoint (less than 1200px);
modal-fullscreen-xxl-down
- the modal is in fullscreen mode only if the screen size is below the "XXL" breakpoint (less than 1400px).
The container that contains this text is the "body" of your modal. If the content height will be larger than this area, the scroll will be applied automatically.
The modal "header" and "footer" are always visible. You can add some important information here.
The "close" buttons in the modal "header" and "footer" can be moved to any container of this modal - they will work as they should. If you want to delete the "header", but save the "cross" close button and make it always visible, do the following:
Move the "close" button to the "Modal content" container;
Go to the "Display" tab, set the "Position" to "Absolute";
Set the "Position from top" and "Position from right" both to "0%";
Go to the "Margins" tab, add new "Top" and "Right" margins for the "XS" breakpoint;
Set these margins to "1 rem" (16px);
Delete the "Modal header" container.
Hope you'll enjoy working with the Bootstrap Modal windows 😉