Modal components
Below is a static modal example (meaning its position and
display have been overridden). Included are the modal header, modal body (required
for padding), and modal footer (optional). We ask that you include modal headers
with dismiss actions whenever possible, or provide another explicit dismiss action.
Modal Scrolling
When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
Optional sizes
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.
Scrolling long content
When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
Vertically centered
Add .modal-dialog-centered to .modal-dialog to vertically center the modal.
Using the grid
Utilize the Bootstrap grid system within a modal by nesting
.container-fluid within the .modal-body. Then, use the normal grid
system classes as you would anywhere else.
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.