root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

add table of classes

This commit is contained in:
Mark Otto 2018-07-07 20:15:48 -07:00
parent cc41a5e64f
commit 17a25b72c8
1 changed files with 34 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
docs/4.1/components/modal.md
View File

@ -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>