From: Mark Otto <markdotto@gmail.com>
Date: Sun, 8 Jul 2018 03:15:48 +0000 (-0700)
Subject: add table of classes
X-Git-Tag: v4.2.0~404
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=17a25b72c8d414c265e389def7a7bdc5779be57a;p=thirdparty%2Fbootstrap.git

add table of classes
---

diff --git a/docs/4.1/components/modal.md b/docs/4.1/components/modal.md
index 39c638b6d4..0d0fc49a6d 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>