-
-
Notifications
You must be signed in to change notification settings - Fork 78.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
In the modal dialog there is no md breakpoint #40591
Comments
Hi @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. |
@julien-deramond is this really a bug or am I missing something? |
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? |
Yeah but what's the idea behind it? I want to max-width it also on md not only on lg and xl. |
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
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. |
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? |
Prerequisites
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
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
The text was updated successfully, but these errors were encountered: