element:
## Example - Small Modal
[Try it Β»](#)
## Example - Large Modal
[Try it Β»](#)
## Example - Extra Large Modal
[Try it Β»](#)
### Fullscreen Modal
Use the .modal-fullscreen class to make the modal fullscreen:
## Example - Fullscreen Modal
[Try it Β»](#)
Use the .modal-fullscreen-*-* classes to control at which sizes the modal should be fullscreen:
| Class | Description | Example |
| --- | --- | --- |
| `.modal-fullscreen-sm-down` | Fullscreen below 576px | (#) |
| `.modal-fullscreen-md-down` | Fullscreen below 768px | (#) |
| `.modal-fullscreen-lg-down` | Fullscreen below 992px | (#) |
| `.modal-fullscreen-xl-down` | Fullscreen below 1200px | (#) |
| `.modal-fullscreen-xxl-down` | Fullscreen below 1400px | (#) |
* * *
## Centered Modal
Use the .modal-dialog-centered class to vertically center the modal:
## Example
[Try it Β»](#)
* * *
## Modal Scroll
By default, if the modal has a lot of content, the page will automatically generate a scrollbar, and the modal will scroll with the page:
## Example
[Try it Β»](#)
If we want to set a scrollbar inside the modal only, we can use the .modal-dialog-scrollable class:
## Example
[Try it Β»](#)
[](#)(#)
(#)[](#)
YouTip