diff --git a/scss/_modal.scss b/scss/_modal.scss
index 6b6770b32c24cce8f3079cdf42596c5c7bfb8422..f9b707491487c9a4f27571147771235dd00e2238 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -227,3 +227,22 @@
 @include media-breakpoint-up(xl) {
   .modal-xl { max-width: $modal-xl; }
 }
+
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-down($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .modal#{$infix}-full {
+      height: 100vh;
+      margin: 0;
+      max-width: 100vw;
+
+      .modal-content {
+        height: 100%;
+        border: 0;
+        border-radius: 0;
+      }
+    }
+  }
+}
diff --git a/site/content/docs/4.3/components/modal.md b/site/content/docs/4.3/components/modal.md
index ca962f740c8b6e860207d067c7dcdd13afdba79e..242aab704368552d02f6e04f79ea4759d01f1867 100644
--- a/site/content/docs/4.3/components/modal.md
+++ b/site/content/docs/4.3/components/modal.md
@@ -613,18 +613,35 @@ Modals have three optional sizes, available via modifier classes to be placed on
       <td><code>.modal-xl</code></td>
       <td><code>1140px</code></td>
     </tr>
+    <tr>
+      <td>Full screen</td>
+      <td><code>.modal-full</code></td>
+      <td>Responsive variations ex:<code>.modal-sm-full</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-full">Full screen modal</button>
   <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 >}}
+<!-- Full screen modal -->
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-full">Full screen modal</button>
+
+<div class="modal fade bd-example-modal-full" tabindex="-1" role="dialog" aria-labelledby="myFullModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-full">
+    <div class="modal-content">
+      ...
+    </div>
+  </div>
+</div>
+
 <!-- Extra large modal -->
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>
 
@@ -659,6 +676,23 @@ Our default modal without modifier class constitutes the "medium" size modal.
 </div>
 {{< /highlight >}}
 
+<div class="modal fade bd-example-modal-full" tabindex="-1" role="dialog" aria-labelledby="myFullModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-full">
+  
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title h4" id="myFullModalLabel">Full screen modal</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        ...
+      </div>
+    </div>
+  </div>
+</div>
+
 <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">