From 584039cd1e1f4d802bc24323cde279a8e901f0b1 Mon Sep 17 00:00:00 2001
From: Tommaso Allegretti <allegretti.tommaso@gmail.com>
Date: Fri, 8 Dec 2023 15:57:17 +0100
Subject: [PATCH 1/3] add xxl size modal

---
 scss/_modal.scss     | 6 ++++++
 scss/_variables.scss | 1 +
 2 files changed, 7 insertions(+)

diff --git a/scss/_modal.scss b/scss/_modal.scss
index 494db94e7eb9..bfab38866b5e 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -204,6 +204,12 @@
   }
 }
 
+@include media-breakpoint-up(xxl) {
+  .modal-xxl {
+    --#{$prefix}modal-width: #{$modal-xxl};
+  }
+}
+
 // scss-docs-start modal-fullscreen-loop
 @each $breakpoint in map-keys($grid-breakpoints) {
   $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 2d70310a516d..5280d8239854 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1531,6 +1531,7 @@ $modal-sm:                          300px !default;
 $modal-md:                          500px !default;
 $modal-lg:                          800px !default;
 $modal-xl:                          1140px !default;
+$modal-xxl:                         1320px !default;
 
 $modal-fade-transform:              translate(0, -50px) !default;
 $modal-show-transform:              none !default;

From 0c44a69ef6a3ef10bf50131ebff2e13c146179ca Mon Sep 17 00:00:00 2001
From: Tommaso Allegretti <allegretti.tommaso@gmail.com>
Date: Mon, 11 Dec 2023 20:06:08 +0100
Subject: [PATCH 2/3] add documentation for modal-xxl

---
 site/content/docs/5.3/components/modal.md | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/site/content/docs/5.3/components/modal.md b/site/content/docs/5.3/components/modal.md
index 3ca7cc4d2240..44601ed8c424 100644
--- a/site/content/docs/5.3/components/modal.md
+++ b/site/content/docs/5.3/components/modal.md
@@ -553,7 +553,7 @@ Embedding YouTube videos in modals requires additional JavaScript not in Bootstr
 
 ## Optional sizes
 
-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.
+Modals have four 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.
 
 {{< bs-table "table" >}}
 | Size | Class | Modal max-width
@@ -562,22 +562,39 @@ Modals have three optional sizes, available via modifier classes to be placed on
 | Default | <span class="text-body-secondary">None</span> | `500px` |
 | Large | `.modal-lg` | `800px` |
 | Extra large | `.modal-xl` | `1140px` |
+| Extra extra large | `.modal-xxl` | `1320px` |
 {{< /bs-table >}}
 
 Our default modal without modifier class constitutes the "medium" size modal.
 
 <div class="bd-example">
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalXxl">Extra extra large modal</button>
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalXl">Extra large modal</button>
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLg">Large modal</button>
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalSm">Small modal</button>
 </div>
 
 ```html
+<div class="modal-dialog modal-xxl">...</div>
 <div class="modal-dialog modal-xl">...</div>
 <div class="modal-dialog modal-lg">...</div>
 <div class="modal-dialog modal-sm">...</div>
 ```
 
+<div class="modal fade" id="exampleModalXxl" tabindex="-1" aria-labelledby="exampleModalXxlLabel" aria-hidden="true">
+  <div class="modal-dialog modal-xxl">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h1 class="modal-title fs-4" id="exampleModalXxlLabel">Extra extra large modal</h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        ...
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="modal fade" id="exampleModalXl" tabindex="-1" aria-labelledby="exampleModalXlLabel" aria-hidden="true">
   <div class="modal-dialog modal-xl">
     <div class="modal-content">

From 2e4f2dc32a363a40e5b7e04e4492eafbf535e9a3 Mon Sep 17 00:00:00 2001
From: Tommaso Allegretti <allegretti.tommaso@gmail.com>
Date: Mon, 11 Dec 2023 22:21:43 +0100
Subject: [PATCH 3/3] add width of xxl modal for lg and xl breakpoints

---
 scss/_modal.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/scss/_modal.scss b/scss/_modal.scss
index bfab38866b5e..0c1b3f91a01a 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -193,13 +193,15 @@
 
 @include media-breakpoint-up(lg) {
   .modal-lg,
-  .modal-xl {
+  .modal-xl,
+  .modal-xxl {
     --#{$prefix}modal-width: #{$modal-lg};
   }
 }
 
 @include media-breakpoint-up(xl) {
-  .modal-xl {
+  .modal-xl,
+  .modal-xxl {
     --#{$prefix}modal-width: #{$modal-xl};
   }
 }