Add CSS breakpoint for modal.

scss/_modal.scss

@@ -32,6 +32,13 @@
   --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
   // scss-docs-end modal-css-vars
 
+  // Modal width breakpoints
+  // These can be customized using CSS variables
+  --#{$prefix}modal-sm-width: #{$modal-sm};
+  --#{$prefix}modal-md-width: #{$modal-md};
+  --#{$prefix}modal-lg-width: #{$modal-lg};
+  --#{$prefix}modal-xl-width: #{$modal-xl};
+
   position: fixed;
   top: 0;
   left: 0;
@@ -204,6 +211,32 @@
   }
 }
 
+// Media Queries for new CSS Breakpoints
+@include media-breakpoint-up(sm) {
+  .modal-dialog {
+    max-width: var(--#{$prefix}modal-md-width);
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  .modal-sm {
+    max-width: var(--#{$prefix}modal-sm-width);
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .modal-lg,
+  .modal-xl {
+    max-width: var(--#{$prefix}modal-lg-width);
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .modal-xl {
+    max-width: var(--#{$prefix}modal-xl-width);
+  }
+}
+
 // scss-docs-start modal-fullscreen-loop
 @each $breakpoint in map-keys($grid-breakpoints) {
   $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

site/content/docs/5.3/components/modal.md

@@ -869,3 +869,71 @@ myModalEl.addEventListener('hidden.bs.modal', event => {
   // do something...
 })
 ```
+
+## New Custom Modal Width Breakpoints
+
+You can now set custom width breakpoints for modals using CSS variables. This allows you to define different modal sizes for different screen widths, directly in your CSS.
+
+### Custom Properties for Modal Sizes
+
+Here are the available CSS custom properties for modals:
+
+- `--bs-modal-sm-width`: Custom width for small modals (default `300px`).
+- `--bs-modal-md-width`: Custom width for medium modals (default `500px`).
+- `--bs-modal-lg-width`: Custom width for large modals (default `800px`).
+- `--bs-modal-xl-width`: Custom width for extra-large modals (default `1140px`).
+
+#### Example Usage:
+
+In your custom CSS:
+
+```css
+:root {
+  --bs-modal-sm-width: 400px;
+  --bs-modal-md-width: 600px;
+  --bs-modal-lg-width: 900px;
+  --bs-modal-xl-width: 1200px;
+}
+```
+The Example of the Modal:
+
+<div class="bd-example">
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#smallModal">
+    Small Modal
+  </button>
+</div>
+
+
+```html
+<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#smallModal">
+  Small Modal
+</button>
+
+<div class="modal fade" id="smallModal" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog modal-sm">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Small Modal</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <p>This is a small modal example.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+```
+<div class="modal fade" id="smallModal" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog modal-sm">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Small Modal</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <p>This is a small modal example.</p>
+      </div>
+    </div>
+  </div>
+</div>