Add Full-Screen size to Modal and Responsive variations for breakpoints

(Works from breakpoint and down)

scss/_mixins.scss

@@ -26,6 +26,7 @@
 @import "mixins/pagination";
 @import "mixins/lists";
 @import "mixins/list-group";
+@import "mixins/modal";
 @import "mixins/forms";
 @import "mixins/table-row";
 

scss/_modal.scss

@@ -85,6 +85,7 @@
   flex-direction: column;
   width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
   // counteract the pointer-events: none; in the .modal-dialog
+  height: 100%;
   color: $modal-content-color;
   pointer-events: auto;
   background-color: $modal-content-bg;
@@ -142,6 +143,7 @@
   // when there should be a fixed height on `.modal-dialog`.
   flex: 1 1 auto;
   padding: $modal-inner-padding;
+  overflow-y: auto;
 }
 
 // Footer (for actions)
@@ -204,3 +206,17 @@
 @include media-breakpoint-up(xl) {
   .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);
+
+    .modal-fullscreen#{$infix}-down {
+      @include modalFullscreen();
+    }
+  }
+}

scss/mixins/_modal.scss

@@ -0,0 +1,14 @@
+// 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);
+  }
+}