Skip to content
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.

Sign up for GitHub

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

Jump to bottom

add xxl size modal #39477

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

add xxl size modal #39477

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
584039c
add xxl size modal
TommasoAllegretti Dec 8, 2023
0c44a69
add documentation for modal-xxl
TommasoAllegretti Dec 11, 2023
9d1bf39
Merge branch 'main' into modal-xxl
julien-deramond Dec 11, 2023
2e4f2dc
add width of xxl modal for lg and xl breakpoints
TommasoAllegretti Dec 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 10 additions & 2 deletions scss/_modal.scss
View file
Open in desktop
julien-deramond marked this conversation as resolved.
Show resolved Hide resolved
Expand Up @@ -193,17 +193,25 @@

@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};
}
}

@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);
Expand Down
1 change: 1 addition & 0 deletions scss/_variables.scss
View file
Open in desktop
Expand Up @@ -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;
Expand Down
19 changes: 18 additions & 1 deletion site/content/docs/5.3/components/modal.md
View file
Open in desktop
Expand Up @@ -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
Expand All @@ -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">
Expand Down