Merge pull request #19105 from twbs/v4-modal-widths

v4: Update modal sizing
twbs · Feb 7, 2016 · cecc301 · cecc301
2 parents 64b88bd + 6c2b0d2
commit cecc301
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git 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
@@ -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; }
 }