Modals
Optional sizes
Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog.
| Size | Class | Modal max-width | Modal Demo |
|---|---|---|---|
| Small | .modal-sm |
300px |
|
| Default | None | 500px |
|
| Large | .modal-lg |
800px |
|
| Extra large | .modal-xl |
1140px |
|
| Default (Center Modal) | .modal-dialog-centered |
500px |
|
| Default (Scroll Modal) | .modal-dialog-scrollable |
500px |
Fullscreen 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 Demo |
|---|---|---|
.modal-fullscreen |
Always | |
.modal-fullscreen-sm-down |
Below 576px |
|
.modal-fullscreen-md-down |
Below 768px |
|
.modal-fullscreen-lg-down |
Below 992px |
|
.modal-fullscreen-xl-down |
Below 1200px |
|
.modal-fullscreen-xxl-down |
Below 1400px |
Themes Modal
You can use custom modals with themes colors.
Login & Signup Modal
You can use custom modals with Login and SignUp form.