In the modal dialog there is no md breakpoint

[VMLuca]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I do not see a breakpoint for the md size.
If you look at the _modal.scss code, you will see that there are only breakpoints for xl and lg, and below sm.

Reduced test cases

// Scale up the modal
@include media-breakpoint-up(sm) {
  .modal {
    --#{$prefix}modal-margin: #{$modal-dialog-margin-y-sm-up};
    --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-sm-up};
  }

  // Automatically set modal's width for larger viewports
  .modal-dialog {
    max-width: var(--#{$prefix}modal-width);
    margin-right: auto;
    margin-left: auto;
  }

  .modal-sm {
    --#{$prefix}modal-width: #{$modal-sm};
  }
}

@include media-breakpoint-up(lg) {
  .modal-lg,
  .modal-xl {
    --#{$prefix}modal-width: #{$modal-lg};
  }
}

@include media-breakpoint-up(xl) {
  .modal-xl {
    --#{$prefix}modal-width: #{$modal-xl};
  }
}

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3.3

[julien-deramond]

Hi @VMLuca
Could you please provide more details on where you're experiencing the issue in terms of rendering? Specifically, which type of modal from the documentation, at which breakpoint, and what you would expect instead? This will help me understand the specific use cases where this problem occurs.

[VMLuca]

Thanks for you answer. I will try to narrow it down from a different perspective.

When you look at the scss variables bootstrap offers me 4 widths for different breakpoints (https://getbootstrap.com/docs/5.3/components/modal/#sass-variables)

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

When the screen is ≥1200px (xl) the modal ist 1140px, when the screen is ≥992px (lg) the modal is 800px an when the screen is ≥768px (md) the modal should be 500px. But no breakpoint hooks in at md breakpoint.

[VMLuca]

@julien-deramond is this really a bug or am I missing something?

[firdaus-aziz]

md/500px is the default modal size according to https://getbootstrap.com/docs/5.3/components/modal/#optional-sizes

Perhaps that is why there is no dedicated breakpoint hook for md?

[VMLuca]

Yeah but what's the idea behind it? I want to max-width it also on md not only on lg and xl.

[Riyazul555]

It looks like you're encountering an issue where the Bootstrap modal dialog does not have a specific breakpoint for the md size, resulting in unexpected behavior when the screen width is between 768px and 992px
For fixing this we can do these changes

• New md Breakpoint: Added a new media query block for the md breakpoint using include media-breakpoint-up(md).
• Modal Width for md: Set the modal width for the md size (.modal-md) to --#{$prefix}modal-width: #{$modal-md};.

By making these changes, the modal will now have a specific width defined for screens between 768px and 992px, addressing the gap in the original breakpoints.

[VMLuca]

Thanks for your PR!

I also see that for the breakpoints there are only SCSS variables available for now. In my case I need to set breakpoints for each modal differently. Is there any way you can integrate this or should I open a new topic?