Bootstrap Modal Dynamic Width
inline-block
elements get dynamic width regarding their content.
body .modal-dialog { /* Width */
max-width: 100%;
width: auto !important;
display: inline-block;
}
Note: width: auto !important;
is required to overwrite bootstrap css.
Finally to place it in middle of viewport you to display: flex;
on the parent element
.modal {
z-index: -1;
display: flex !important;
justify-content: center;
align-items: center;
}
.modal-open .modal {
z-index: 1050;
}
@tmg's answer will only work for Bootstrap 3. For Bootstrap 4, use this:
.modal {
text-align: center;
}
Alongside his suggestion:
.modal-dialog {
text-align: left; /* you'll likely want this */
max-width: 100%;
width: auto !important;
display: inline-block;
}
fit-content
worked well for me with no ill side effects like a misplaced modal.
.modal {
padding: 1%;
}
.modal-lg {
min-width: auto;
max-width: fit-content;
}
Works in Bootstrap 4-
Here I have added min width to 300px, max width to 90vw, modal can be scrolled vertically using screen scrollbar, and horizontal scrollbar shows up on modal if content width is > 90vw
.modal-dialog {
position: relative;
display: table;
overflow: auto;
width: auto;
min-width: 300px;
}
.modal-body { /* Restrict Modal width to 90% */
overflow-x: auto !important;
max-width: 90vw !important;
}