Fix CSS and improve docs

4 files changed, 60 insertions, 64 deletions

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 9ace99c32..5a04655d5 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -26,7 +26,6 @@
 @import "mixins/pagination";
 @import "mixins/lists";
 @import "mixins/list-group";
-@import "mixins/modal";
 @import "mixins/forms";
 @import "mixins/table-row";
 
diff --git a/scss/_modal.scss b/scss/_modal.scss
index b91848d8b..d898a6b0b 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -62,11 +62,6 @@
     overflow: hidden;
   }
 
-  .modal-header,
-  .modal-footer {
-    flex-shrink: 0;
-  }
-
   .modal-body {
     overflow-y: auto;
   }
@@ -116,6 +111,7 @@
 // Top section of the modal w/ title and dismiss
 .modal-header {
   display: flex;
+  flex-shrink: 0;
   align-items: flex-start; // so the close btn always stays on the upper right corner
   justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
   padding: $modal-header-padding;
@@ -143,13 +139,13 @@
   // when there should be a fixed height on `.modal-dialog`.
   flex: 1 1 auto;
   padding: $modal-inner-padding;
-  overflow-y: auto;
 }
 
 // Footer (for actions)
 .modal-footer {
   display: flex;
   flex-wrap: wrap;
+  flex-shrink: 0;
   align-items: center; // vertically center
   justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
   padding: $modal-inner-padding - $modal-footer-margin-between / 2;
@@ -207,16 +203,25 @@
   .modal-xl { max-width: $modal-xl; }
 }
 
-.modal-fullscreen {
-  @include modalFullscreen();
-}
-
 @each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-down($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+  $next-breakpoint: breakpoint-next($breakpoint);
+  $postfix: if(breakpoint-max($breakpoint, $grid-breakpoints) == null, "", "-#{$next-breakpoint}-down");
 
-    .modal-fullscreen#{$infix}-down {
-      @include modalFullscreen();
+  @include media-breakpoint-down($breakpoint) {
+    .modal-fullscreen#{$postfix} {
+      width: 100vw;
+      max-width: none;
+      height: 100%;
+      margin: 0;
+
+      .modal-content {
+        border: 0;
+        @include border-radius(0);
+      }
+
+      .modal-body {
+        overflow-y: auto;
+      }
     }
   }
 }
diff --git a/scss/mixins/_modal.scss b/scss/mixins/_modal.scss
deleted file mode 100644
index 061fb6320..000000000
--- a/scss/mixins/_modal.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-// Modal
-
-// Maximize modal to cover viewport
-@mixin modalFullscreen {
-  width: 100vw;
-  max-width: none;
-  height: 100vh;
-  margin: 0;
-
-  .modal-content {
-    border: 0;
-    @include border-radius(0);
-  }
-}
diff --git a/site/content/docs/4.3/components/modal.md b/site/content/docs/4.3/components/modal.md
index a5732c6a0..c202aa70e 100644
--- a/site/content/docs/4.3/components/modal.md
+++ b/site/content/docs/4.3/components/modal.md
@@ -695,50 +695,44 @@ Another override is the option to pop up a modal that covers the user viewport,
       <td>Always</td>
     </tr>
     <tr>
-      <td><code>.modal-fullscreen-xl-down</code></td>
-      <td><code>Below 1200px</code></td>
-    </tr>
-    <tr>
-      <td><code>.modal-fullscreen-lg-down</code></td>
-      <td><code>Below 992px</code></td>
+      <td><code>.modal-fullscreen-sm-down</code></td>
+      <td><code>Below 576px</code></td>
     </tr>
     <tr>
       <td><code>.modal-fullscreen-md-down</code></td>
       <td><code>Below 768px</code></td>
     </tr>
     <tr>
-      <td><code>.modal-fullscreen-sm-down</code></td>
-      <td><code>Below 576px</code></td>
+      <td><code>.modal-fullscreen-lg-down</code></td>
+      <td><code>Below 992px</code></td>
+    </tr>
+    <tr>
+      <td><code>.modal-fullscreen-xl-down</code></td>
+      <td><code>Below 1200px</code></td>
     </tr>
   </tbody>
 </table>
 
 <div class="bd-example">
-  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-fullscreen">Full screen</button>
-  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-fullscreen-xl-down">Full screen below xl</button>
-  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-fullscreen-lg-down">Full screen below lg</button>
-  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-fullscreen-md-down">Full screen below md</button>
-  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-fullscreen-sm-down">Full screen below sm</button>
+  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreen">Full screen</button>
+  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreenSm">Full screen below sm</button>
+  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreenMd">Full screen below md</button>
+  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreenLg">Full screen below lg</button>
+  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreenXl">Full screen below xl</button>
 </div>
 
 {{< highlight html >}}
 <!-- Full screen modal -->
-<button id="toggleFullScreenBtn" type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-fullscreen">Full screen modal</button>
-
-<div class="modal fade bd-example-modal-fullscreen" tabindex="-1" role="dialog" aria-labelledby="toggleFullScreenBtn" aria-hidden="true">
-  <div class="modal-dialog modal-xl-fullscreen">
-    <div class="modal-content">
-      ...
-    </div>
-  </div>
+<div class="modal-dialog modal-fullscreen-sm-down">
+  ...
 </div>
 {{< /highlight >}}
 
-<div class="modal fade bd-example-modal-fullscreen" tabindex="-1" role="dialog" aria-labelledby="myFullModalLabel" aria-hidden="true">
+<div class="modal fade" id="exampleModalFullscreen" tabindex="-1" role="dialog" aria-labelledby="exampleModalFullscreenLabel" aria-hidden="true">
   <div class="modal-dialog modal-fullscreen">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title h4" id="myFullModalLabel">Full screen modal</h5>
+        <h5 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen modal</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
@@ -770,11 +764,11 @@ Another override is the option to pop up a modal that covers the user viewport,
   </div>
 </div>
 
-<div class="modal fade bd-example-modal-fullscreen-xl-down" tabindex="-1" role="dialog" aria-labelledby="myFullModalLabelXl" aria-hidden="true">
-  <div class="modal-dialog modal-fullscreen-xl-down" role="document">
+<div class="modal fade" id="exampleModalFullscreenSm" tabindex="-1" role="dialog" aria-labelledby="exampleModalFullscreenSmLabel" aria-hidden="true">
+  <div class="modal-dialog modal-fullscreen-sm-down" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title h4" id="myFullModalLabelXl">Full screen below xl</h5>
+        <h5 class="modal-title h4" id="exampleModalFullscreenSmLabel">Full screen below sm</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
@@ -782,15 +776,18 @@ Another override is the option to pop up a modal that covers the user viewport,
       <div class="modal-body">
         ...
       </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+      </div>
     </div>
   </div>
 </div>
 
-<div class="modal fade bd-example-modal-fullscreen-lg-down" tabindex="-1" role="dialog" aria-labelledby="myFullModalLabelLg" aria-hidden="true">
-  <div class="modal-dialog modal-fullscreen-lg-down" role="document">
+<div class="modal fade" id="exampleModalFullscreenMd" tabindex="-1" role="dialog" aria-labelledby="exampleModalFullscreenMdLabel" aria-hidden="true">
+  <div class="modal-dialog modal-fullscreen-md-down" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title h4" id="myFullModalLabelLg">Full screen below lg</h5>
+        <h5 class="modal-title h4" id="exampleModalFullscreenMdLabel">Full screen below md</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
@@ -798,15 +795,18 @@ Another override is the option to pop up a modal that covers the user viewport,
       <div class="modal-body">
         ...
       </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+      </div>
     </div>
   </div>
 </div>
 
-<div class="modal fade bd-example-modal-fullscreen-md-down" tabindex="-1" role="dialog" aria-labelledby="myFullModalLabelMd" aria-hidden="true">
-  <div class="modal-dialog modal-fullscreen-md-down" role="document">
+<div class="modal fade" id="exampleModalFullscreenLg" tabindex="-1" role="dialog" aria-labelledby="exampleModalFullscreenLgLabel" aria-hidden="true">
+  <div class="modal-dialog modal-fullscreen-lg-down" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title h4" id="myFullModalLabelMd">Full screen below md</h5>
+        <h5 class="modal-title h4" id="exampleModalFullscreenLgLabel">Full screen below lg</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
@@ -814,15 +814,18 @@ Another override is the option to pop up a modal that covers the user viewport,
       <div class="modal-body">
         ...
       </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+      </div>
     </div>
   </div>
 </div>
 
-<div class="modal fade bd-example-modal-fullscreen-sm-down" tabindex="-1" role="dialog" aria-labelledby="myFullModalLabelSm" aria-hidden="true">
-  <div class="modal-dialog modal-fullscreen-sm-down" role="document">
+<div class="modal fade" id="exampleModalFullscreenXl" tabindex="-1" role="dialog" aria-labelledby="exampleModalFullscreenXlLabel" aria-hidden="true">
+  <div class="modal-dialog modal-fullscreen-xl-down" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title h4" id="myFullModalLabelSm">Full screen below sm</h5>
+        <h5 class="modal-title h4" id="exampleModalFullscreenXlLabel">Full screen below xl</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
@@ -830,6 +833,9 @@ Another override is the option to pop up a modal that covers the user viewport,
       <div class="modal-body">
         ...
       </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+      </div>
     </div>
   </div>
 </div>