modal-dialog-scrollable
bootstrap5.css
bootstrap5.css
.modal-dialog-scrollable {
display: -ms-flexbox;
display: flex;
max-height: calc(100% - 1rem);
}
bootstrap5.css
.modal-dialog-scrollable .modal-content {
max-height: calc(100vh - 1rem);
overflow: hidden;
}
bootstrap5.css
.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
-ms-flex-negative: 0;
flex-shrink: 0;
}
bootstrap5.css
.modal-dialog-scrollable .modal-body {
overflow-y: auto;
}
bootstrap5.css
.modal-dialog-centered.modal-dialog-scrollable {
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
}
bootstrap5.css
.modal-dialog-centered.modal-dialog-scrollable .modal-content {
max-height: none;
}
bootstrap5.css
.modal-dialog-centered.modal-dialog-scrollable::before {
content: none;
}
bootstrap5.css
@media (min-width: 576px) {
.modal-dialog {
max-width: 500px;
margin: 1.75rem auto;
}
.modal-dialog-scrollable {
max-height: calc(100% - 3.5rem);
}
.modal-dialog-scrollable .modal-content {
max-height: calc(100vh - 3.5rem);
}
.modal-dialog-centered {
min-height: calc(100% - 3.5rem);
}
.modal-dialog-centered::before {
height: calc(100vh - 3.5rem);
}
.modal-sm {
max-width: 300px;
}
}