diff options
Diffstat (limited to 'docs')
| -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> |