diff options
Diffstat (limited to 'docs/components/modal.md')
| -rw-r--r-- | docs/components/modal.md | 31 |
1 files changed, 30 insertions, 1 deletions
diff --git a/docs/components/modal.md b/docs/components/modal.md index 16689f6ae..56b4dfc2a 100644 --- a/docs/components/modal.md +++ b/docs/components/modal.md @@ -422,14 +422,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 class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button> @@ -453,6 +465,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"> |