diff options
| -rw-r--r-- | docs/components/modal.md | 2 | ||||
| -rw-r--r-- | scss/_modal.scss | 10 |
2 files changed, 6 insertions, 6 deletions
diff --git a/docs/components/modal.md b/docs/components/modal.md index e8627fe682..a8b1b48506 100644 --- a/docs/components/modal.md +++ b/docs/components/modal.md @@ -181,7 +181,7 @@ Embedding YouTube videos in modals requires additional JavaScript not in Bootstr ## Optional sizes -Modals have two optional sizes, available via modifier classes to be placed on a `.modal-dialog`. +Modals have two optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These size kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. <div class="bd-example"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button> diff --git a/scss/_modal.scss b/scss/_modal.scss index c43d55b5ac..83bb4932be 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -130,17 +130,17 @@ @include media-breakpoint-up(sm) { // Automatically set modal's width for larger viewports .modal-dialog { - width: $modal-md; + max-width: $modal-md; margin: 30px auto; } + .modal-content { @include box-shadow($modal-content-sm-up-box-shadow); } - // Modal sizes - .modal-sm { width: $modal-sm; } + .modal-sm { max-width: $modal-sm; } } -@include media-breakpoint-up(md) { - .modal-lg { width: $modal-lg; } +@include media-breakpoint-up(lg) { + .modal-lg { max-width: $modal-lg; } } |