mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-24 03:40:10 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
v4: Update modal sizing
This commit is contained in:
Mark Otto 2016-02-06 20:31:27 -08:00
commit cecc3017dc
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/components/modal.md
View File

@ -181,7 +181,7 @@ Embedding YouTube videos in modals requires additional JavaScript not in Bootstr
## Optional sizes ## 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"> <div class="bd-example">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

10
scss/_modal.scss
View File

@ -130,17 +130,17 @@
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
// Automatically set modal's width for larger viewports // Automatically set modal's width for larger viewports
.modal-dialog { .modal-dialog {
width: $modal-md; max-width: $modal-md;
margin: 30px auto; margin: 30px auto;
} }
.modal-content { .modal-content {
@include box-shadow($modal-content-sm-up-box-shadow); @include box-shadow($modal-content-sm-up-box-shadow);
} }
// Modal sizes .modal-sm { max-width: $modal-sm; }
.modal-sm { width: $modal-sm; }
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(lg) {
.modal-lg { width: $modal-lg; } .modal-lg { max-width: $modal-lg; }
} }