Itqualityassurance
Modals have three optional sizes, available via modifier classes to be placed on a . modal-dialog .
...
Optional sizes.
| Size | Class | Modal max-width |
|---|---|---|
| Small | .modal-sm | 300px |
| Default | None | 500px |
| Large | .modal-lg | 800px |
| Extra large | .modal-xl | 1140px |
What size should modals be?
The size of modal window shouldn't be too large — the modal window shouldn't take the entire screen. Ideally, it shouldn't take more than 25% of the screen for the overlay.
How to increase modal size in Bootstrap 5?
Change the size of the modal by adding the .modal-sm class for small modals (max-width 300px), .modal-lg class for large modals (max-width 800px), or .modal-xl for extra large modals (max-width 1140px).
Are modals good for mobile?
In some ways, modals are perfect for the limited real estate that mobile devices offer: Mobile modals will fully grab the user's attention since they're the only thing that fits on the screen.
