diff options
| author | Mark Otto <[email protected]> | 2018-07-07 20:15:48 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2018-07-07 20:15:48 -0700 |
| commit | 17a25b72c8d414c265e389def7a7bdc5779be57a (patch) | |
| tree | b604a1d068db653209597be27f3a0c5d90c309db | |
| parent | cc41a5e64f06c9cbdca91bf45967a448c1bda29d (diff) | |
| download | bootstrap-17a25b72c8d414c265e389def7a7bdc5779be57a.tar.xz bootstrap-17a25b72c8d414c265e389def7a7bdc5779be57a.zip | |
add table of classes
| -rw-r--r-- | docs/4.1/components/modal.md | 34 |
1 files changed, 34 insertions, 0 deletions
diff --git a/docs/4.1/components/modal.md b/docs/4.1/components/modal.md index 39c638b6d..0d0fc49a6 100644 --- a/docs/4.1/components/modal.md +++ b/docs/4.1/components/modal.md @@ -474,6 +474,40 @@ Embedding YouTube videos in modals requires additional JavaScript not in Bootstr Modals have three optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. +<table class="table table-striped"> + <thead> + <tr> + <th>Size</th> + <th>Class</th> + <th>Modal max-width</th> + </tr> + </thead> + <tbody> + <tr> + <td>Small</td> + <td><code>.modal-sm</code></td> + <td><code>300px</code></td> + </tr> + <tr> + <td>Default</td> + <td class="text-muted">None</td> + <td><code>500px</code></td> + </tr> + <tr> + <td>Large</td> + <td><code>.modal-lg</code></td> + <td><code>800px</code></td> + </tr> + <tr> + <td>Extra large</td> + <td><code>.modal-xl</code></td> + <td><code>1140px</code></td> + </tr> + </tbody> +</table> + +Our default modal without modifier class constitutes the "medium" size modal. + <div class="bd-example"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button> |