In the modal dialog there is no md breakpoint

VMLuca commented 1 month ago

Prerequisites

[X] I have searched for duplicate or closed issues
[X] I have validated any HTML to avoid common problems
[X] 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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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

firdaus-aziz commented 3 weeks ago

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 commented 3 weeks ago

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

Riyazul555 commented 3 weeks ago

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 commented 2 weeks ago

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?

twbs / bootstrap