Modal widths are defined as percentages of the browser but will still align to columns on the 2x grid.
...
Max sizes.
Modal size | Max-height |
---|---|
Small (sm) | 72% |
Medium (md) | 84% |
Large (lg) | 96% |
How do I set modal popup height?
modal-body use calc() function to calculate desired height. In above case we want to occupy 80vh of the viewport, reduced by the size of header + footer in pixels. This is around 140px together but you can measure it easily and apply your own custom values. For smaller/taller modal modify 80vh accordingly.
How to increase the size of modal dialog?
Modal Size
Change the size of the modal by adding the . modal-sm class for small modals, . modal-lg class for large modals, or . modal-xl for extra large modals.