From 17a25b72c8d414c265e389def7a7bdc5779be57a Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 7 Jul 2018 20:15:48 -0700
Subject: [PATCH] add table of classes

---
 docs/4.1/components/modal.md | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

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>