diff options
| author | Mark Otto <[email protected]> | 2018-07-07 16:16:43 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2018-07-07 16:16:43 -0700 |
| commit | 5ad1049622fa409cd9ddf51a3f0f8a5c9d0c2483 (patch) | |
| tree | 1369a9f5c3c31b6e3426c6010ec7f893e1641ad2 /docs | |
| parent | cfc9c85b322bc72b80c0d2398a65febe5bb875b6 (diff) | |
| parent | a8b00ddc126fd5814799b2a77a1b6fe14d04ffb4 (diff) | |
| download | bootstrap-5ad1049622fa409cd9ddf51a3f0f8a5c9d0c2483.tar.xz bootstrap-5ad1049622fa409cd9ddf51a3f0f8a5c9d0c2483.zip | |
Merge branch 'v4-dev' of https://github.com/malkomich/bootstrap into malkomich-v4-dev
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/4.1/components/modal.md | 31 |
1 files changed, 30 insertions, 1 deletions
diff --git a/docs/4.1/components/modal.md b/docs/4.1/components/modal.md index 3ed09170e..0ee0ae241 100644 --- a/docs/4.1/components/modal.md +++ b/docs/4.1/components/modal.md @@ -472,14 +472,26 @@ 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`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. +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. <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> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button> </div> {% highlight html %} +<!-- Extra large modal --> +<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button> + +<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true"> + <div class="modal-dialog modal-xl"> + <div class="modal-content"> + ... + </div> + </div> +</div> + <!-- Large modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button> @@ -503,6 +515,23 @@ Modals have two optional sizes, available via modifier classes to be placed on a </div> {% endhighlight %} +<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true"> + <div class="modal-dialog modal-xl"> + <div class="modal-content"> + + <div class="modal-header"> + <h4 class="modal-title" id="myExtraLargeModalLabel">Extra large modal</h4> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + ... + </div> + </div> + </div> +</div> + <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> |