Modal
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Basic
No close outside
When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
Vertically centered
Sizing
Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog
. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
Size | Class | Modal max-width |
---|---|---|
Small | .modal-sm |
300px |
Default | None | 500px |
Large | .modal-lg |
800px |
Extra large | .modal-xl |
1140px |
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-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 |