From: Mark Otto Date: Mon, 22 Sep 2025 17:12:07 +0000 (-0700) Subject: v6: `justify-items` and `place-items` utilities (#41757) X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=719903bf18cc8884760d7dac2873c9298af6fc79;p=thirdparty%2Fbootstrap.git v6: `justify-items` and `place-items` utilities (#41757) * Add utilities for place-items and justify-items * bump --- diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index e9b4540e9e..0177b5f615 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -2,7 +2,7 @@ "files": [ { "path": "./dist/css/bootstrap-grid.css", - "maxSize": "7.5 kB" + "maxSize": "7.75 kB" }, { "path": "./dist/css/bootstrap-grid.min.css", diff --git a/scss/_root.scss b/scss/_root.scss index 9a7ee1f91d..241147aa65 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -9,7 +9,7 @@ @use "forms/form-variables" as *; // mdo-do: do we need theme? -@layer colors, theme, config, root, reboot, layout, content, forms, components, helpers, custom, utilities; +@layer colors, theme, config, root, reboot, layout, content, forms, components, custom, helpers, utilities; :root { color-scheme: light dark; diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 1baeeb77c0..890bff9813 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -355,6 +355,16 @@ $utilities: map.merge( evenly: space-evenly, ) ), + "justify-items": ( + responsive: true, + property: justify-items, + values: ( + start: start, + end: end, + center: center, + stretch: stretch, + ) + ), "justify-self": ( responsive: true, property: justify-self, @@ -399,6 +409,16 @@ $utilities: map.merge( stretch: stretch, ) ), + "place-items": ( + responsive: true, + property: place-items, + values: ( + start: start, + end: end, + center: center, + stretch: stretch, + ) + ), "order": ( responsive: true, property: order, diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss index a65a895ca9..0b3abbaddf 100644 --- a/scss/bootstrap-grid.scss +++ b/scss/bootstrap-grid.scss @@ -27,9 +27,11 @@ $utilities: map-get-multiple( "flex-shrink", "flex-wrap", "justify-content", + "justify-items", "align-items", "align-content", "align-self", + "place-items", "margin", "margin-x", "margin-y", diff --git a/site/src/content/docs/utilities/flex.mdx b/site/src/content/docs/utilities/flex.mdx index 6272261924..0b0e562c93 100644 --- a/site/src/content/docs/utilities/flex.mdx +++ b/site/src/content/docs/utilities/flex.mdx @@ -623,6 +623,108 @@ Responsive variations also exist for `align-content`. })} +## CSS Grid utilities + +While most of the utilities above apply to flexbox containers, Bootstrap also includes utilities specifically for CSS Grid layouts. + +### Justify items + +Use `justify-items` utilities on CSS Grid containers to change the alignment of grid items along the inline (row) axis. Choose from `start`, `end`, `center`, or `stretch` (browser default). + +
+
+
Grid item
+
Grid item
+
Grid item
+
+
+
Grid item
+
Grid item
+
Grid item
+
+
+
Grid item
+
Grid item
+
Grid item
+
+
+
Grid item
+
Grid item
+
Grid item
+
+
+ +```html +
...
+
...
+
...
+
...
+``` + +Responsive variations also exist for `justify-items`. + + + +### Place items + +Use `place-items` utilities on CSS Grid containers as a shorthand to set both `align-items` and `justify-items` at once. Choose from `start`, `end`, `center`, or `stretch` (browser default). + +
+
+
Grid item
+
Grid item
+
Grid item
+
+
+
Grid item
+
Grid item
+
Grid item
+
+
+
Grid item
+
Grid item
+
Grid item
+
+
+
Grid item
+
Grid item
+
Grid item
+
+
+ +```html +
...
+
...
+
...
+
...
+``` + +Responsive variations also exist for `place-items`. + + + ## Media object Looking to replicate the [media object component](https://getbootstrap.com/docs/4.6/components/media-object/) from Bootstrap 4? Recreate it in no time with a few flex utilities that allow even more flexibility and customization than before. @@ -651,6 +753,6 @@ And say you want to vertically center the content next to the image: ### Sass utilities API -Flexbox utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]]) +Flexbox and CSS Grid utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]]) diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss index 60508fa5f5..4c42abc4de 100644 --- a/site/src/scss/_component-examples.scss +++ b/site/src/scss/_component-examples.scss @@ -9,392 +9,394 @@ // Docs examples // -.bd-code-snippet { - margin: 0 ($bd-gutter-x * -.5) 1rem; - border: solid var(--bs-border-color); - border-width: 1px 0; +@layer custom { + .bd-code-snippet { + margin: 0 ($bd-gutter-x * -.5) 1rem; + border: solid var(--bs-border-color); + border-width: 1px 0; - @include media-breakpoint-up(md) { - margin-right: 0; - margin-left: 0; - border-width: 1px; - @include border-radius(var(--bs-border-radius)); + @include media-breakpoint-up(md) { + margin-right: 0; + margin-left: 0; + border-width: 1px; + @include border-radius(var(--bs-border-radius)); + } } -} -.bd-example { - --bd-example-padding: 1rem; + .bd-example { + --bd-example-padding: 1rem; - position: relative; - display: flow-root; - padding: var(--bd-example-padding); - margin: 0 ($bd-gutter-x * -.5) 1rem; - border: solid var(--bs-border-color); - border-width: 1px 0; + position: relative; + display: flow-root; + padding: var(--bd-example-padding); + margin: 0 ($bd-gutter-x * -.5) 1rem; + border: solid var(--bs-border-color); + border-width: 1px 0; - @include media-breakpoint-up(md) { - --bd-example-padding: 1.5rem; + @include media-breakpoint-up(md) { + --bd-example-padding: 1.5rem; - margin-right: 0; - margin-left: 0; - border-width: 1px; - @include border-radius(var(--bs-border-radius)); - } + margin-right: 0; + margin-left: 0; + border-width: 1px; + @include border-radius(var(--bs-border-radius)); + } - + p { - margin-top: 2rem; - } + + p { + margin-top: 2rem; + } + + > .form-control { + + .form-control { + margin-top: .5rem; + } + } - > .form-control { - + .form-control { + > .nav + .nav, + > .alert + .alert, + > .navbar + .navbar, + > .progress + .progress { + margin-top: $spacer; + } + + > .dropdown-menu { + position: static; + display: block; + } + + > :last-child, + > nav:last-child .breadcrumb { + margin-bottom: 0; + } + + > hr:last-child { + margin-bottom: $spacer; + } + + // Images + > svg + svg, + > img + img { + margin-left: .5rem; + } + + // Buttons + > .btn, + > .btn-group { + margin: .25rem .125rem; + } + > .btn-toolbar + .btn-toolbar { margin-top: .5rem; } - } - > .nav + .nav, - > .alert + .alert, - > .navbar + .navbar, - > .progress + .progress { - margin-top: $spacer; - } + // List groups + > .list-group { + max-width: 400px; + } - > .dropdown-menu { - position: static; - display: block; - } + > [class*="list-group-horizontal"] { + max-width: 100%; + } - > :last-child, - > nav:last-child .breadcrumb { - margin-bottom: 0; - } + // Navbars + .fixed-top, + .sticky-top { + position: static; + margin: calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)) var(--bd-example-padding); + } - > hr:last-child { - margin-bottom: $spacer; - } + .fixed-bottom, + .sticky-bottom { + position: static; + margin: var(--bd-example-padding) calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)); - // Images - > svg + svg, - > img + img { - margin-left: .5rem; - } + } - // Buttons - > .btn, - > .btn-group { - margin: .25rem .125rem; - } - > .btn-toolbar + .btn-toolbar { - margin-top: .5rem; + // Pagination + .pagination { + margin-bottom: 0; + } } - // List groups - > .list-group { - max-width: 400px; - } + // + // Grid examples + // - > [class*="list-group-horizontal"] { - max-width: 100%; + .bd-example-row [class^="col"], + .bd-example-cols [class^="col"] > *, + .bd-example-cssgrid [class*="grid"] > * { + padding-top: .75rem; + padding-bottom: .75rem; + background-color: color-mix(in srgb, var(--bd-violet) 15%, transparent); + border: 1px solid color-mix(in srgb, var(--bd-violet) 30%, transparent); } - // Navbars - .fixed-top, - .sticky-top { - position: static; - margin: calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)) var(--bd-example-padding); + .bd-example-row .row + .row, + .bd-example-cssgrid .grid + .grid { + margin-top: 1rem; } - .fixed-bottom, - .sticky-bottom { - position: static; - margin: var(--bd-example-padding) calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)); - + .bd-example-row-flex-cols .row { + min-height: 10rem; + background-color: color-mix(in srgb, var(--bd-violet) 15%, transparent); } - // Pagination - .pagination { - margin-bottom: 0; + .bd-example-flex div:not(.vr) { + background-color: color-mix(in srgb, var(--bd-violet) 15%, transparent); + border: 1px solid color-mix(in srgb, var(--bd-violet) 30%, transparent); + } + + // // Grid mixins + // .example-container { + // width: 800px; + // @include make-container(); + // } + + // .example-row { + // @include make-row(); + // } + + // .example-content-main { + // @include make-col-ready(); + + // @include media-breakpoint-up(sm) { + // @include make-col(6); + // } + + // @include media-breakpoint-up(lg) { + // @include make-col(8); + // } + // } + + // .example-content-secondary { + // @include make-col-ready(); + + // @include media-breakpoint-up(sm) { + // @include make-col(6); + // } + + // @include media-breakpoint-up(lg) { + // @include make-col(4); + // } + // } + + // Ratio helpers + .bd-example-ratios { + [class*="ratio"] { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1rem; + color: var(--bs-secondary-color); + background-color: var(--bs-tertiary-bg); + border: var(--bs-border-width) solid var(--bs-border-color); + @include border-radius(var(--bs-border-radius)); + } } -} -// -// Grid examples -// - -.bd-example-row [class^="col"], -.bd-example-cols [class^="col"] > *, -.bd-example-cssgrid [class*="grid"] > * { - padding-top: .75rem; - padding-bottom: .75rem; - background-color: color-mix(in srgb, var(--bd-violet) 15%, transparent); - border: 1px solid color-mix(in srgb, var(--bd-violet) 30%, transparent); -} -.bd-example-row .row + .row, -.bd-example-cssgrid .grid + .grid { - margin-top: 1rem; -} + .bd-example-offcanvas { + .offcanvas { + position: static; + display: block; + height: 200px; + visibility: visible; + transform: translate(0); + } + } -.bd-example-row-flex-cols .row { - min-height: 10rem; - background-color: color-mix(in srgb, var(--bd-violet) 15%, transparent); -} + // Tooltips + .tooltip-demo { + a { + white-space: nowrap; + } -.bd-example-flex div:not(.vr) { - background-color: color-mix(in srgb, var(--bd-violet) 15%, transparent); - border: 1px solid color-mix(in srgb, var(--bd-violet) 30%, transparent); -} + .btn { + margin: .25rem .125rem; + } + } -// // Grid mixins -// .example-container { -// width: 800px; -// @include make-container(); -// } - -// .example-row { -// @include make-row(); -// } - -// .example-content-main { -// @include make-col-ready(); - -// @include media-breakpoint-up(sm) { -// @include make-col(6); -// } - -// @include media-breakpoint-up(lg) { -// @include make-col(8); -// } -// } - -// .example-content-secondary { -// @include make-col-ready(); - -// @include media-breakpoint-up(sm) { -// @include make-col(6); -// } - -// @include media-breakpoint-up(lg) { -// @include make-col(4); -// } -// } - -// Ratio helpers -.bd-example-ratios { - [class*="ratio"] { - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 1rem; - color: var(--bs-secondary-color); - background-color: var(--bs-tertiary-bg); - border: var(--bs-border-width) solid var(--bs-border-color); - @include border-radius(var(--bs-border-radius)); + // scss-docs-start custom-tooltip + .custom-tooltip { + --bs-tooltip-bg: var(--bd-violet-bg); + --bs-tooltip-color: var(--bs-white); } -} + // scss-docs-end custom-tooltip + // scss-docs-start custom-popovers + .custom-popover { + --bs-popover-max-width: 200px; + --bs-popover-border-color: var(--bd-violet-bg); + --bs-popover-header-bg: var(--bd-violet-bg); + --bs-popover-header-color: var(--bs-white); + --bs-popover-body-padding-x: 1rem; + --bs-popover-body-padding-y: .5rem; + } + // scss-docs-end custom-popovers -.bd-example-offcanvas { - .offcanvas { - position: static; - display: block; + // Scrollspy demo on fixed height div + .scrollspy-example { height: 200px; - visibility: visible; - transform: translate(0); + margin-top: .5rem; + overflow: auto; } -} -// Tooltips -.tooltip-demo { - a { - white-space: nowrap; + .scrollspy-example-2 { + height: 350px; + overflow: auto; } - .btn { - margin: .25rem .125rem; + .simple-list-example-scrollspy { + .active { + background-color: color-mix(in srgb, var(--bd-violet) 15%, transparent); + } } -} -// scss-docs-start custom-tooltip -.custom-tooltip { - --bs-tooltip-bg: var(--bd-violet-bg); - --bs-tooltip-color: var(--bs-white); -} -// scss-docs-end custom-tooltip - -// scss-docs-start custom-popovers -.custom-popover { - --bs-popover-max-width: 200px; - --bs-popover-border-color: var(--bd-violet-bg); - --bs-popover-header-bg: var(--bd-violet-bg); - --bs-popover-header-color: var(--bs-white); - --bs-popover-body-padding-x: 1rem; - --bs-popover-body-padding-y: .5rem; -} -// scss-docs-end custom-popovers - -// Scrollspy demo on fixed height div -.scrollspy-example { - height: 200px; - margin-top: .5rem; - overflow: auto; -} - -.scrollspy-example-2 { - height: 350px; - overflow: auto; -} - -.simple-list-example-scrollspy { - .active { - background-color: color-mix(in srgb, var(--bd-violet) 15%, transparent); + .bd-example-border-utils { + [class^="border"] { + display: inline-block; + width: 5rem; + height: 5rem; + margin: .25rem; + background-color: var(--bs-tertiary-bg); + } } -} -.bd-example-border-utils { - [class^="border"] { - display: inline-block; - width: 5rem; - height: 5rem; - margin: .25rem; - background-color: var(--bs-tertiary-bg); + .bd-example-rounded-utils { + [class*="rounded"] { + margin: .25rem; + } } -} -.bd-example-rounded-utils { - [class*="rounded"] { - margin: .25rem; - } -} + .bd-example-position-utils { + position: relative; + padding: 2rem; -.bd-example-position-utils { - position: relative; - padding: 2rem; + .position-relative { + height: 200px; + background-color: var(--bs-tertiary-bg); + } - .position-relative { - height: 200px; - background-color: var(--bs-tertiary-bg); + .position-absolute { + width: 2rem; + height: 2rem; + background-color: var(--bs-body-color); + @include border-radius(); + } } - .position-absolute { - width: 2rem; - height: 2rem; - background-color: var(--bs-body-color); - @include border-radius(); + .bd-example-position-examples { + &::after { + content: none; + } } -} -.bd-example-position-examples { - &::after { - content: none; - } -} + // Placeholders + .bd-example-placeholder-cards { + &::after { + display: none; + } -// Placeholders -.bd-example-placeholder-cards { - &::after { - display: none; + .card { + width: 18rem; + } } - .card { - width: 18rem; + // Toasts + .bd-example-toasts { + min-height: 240px; } -} -// Toasts -.bd-example-toasts { - min-height: 240px; -} + .bd-example-zindex-levels { + min-height: 15rem; -.bd-example-zindex-levels { - min-height: 15rem; + > div { + color: var(--bs-body-bg); + background-color: var(--bd-violet); + border: 1px solid var(--bd-purple); - > div { - color: var(--bs-body-bg); - background-color: var(--bd-violet); - border: 1px solid var(--bd-purple); + > span { + position: absolute; + right: 5px; + bottom: 0; + } + } - > span { - position: absolute; - right: 5px; - bottom: 0; + > :nth-child(2) { + top: 3rem; + left: 3rem; + } + > :nth-child(3) { + top: 4.5rem; + left: 4.5rem; + } + > :nth-child(4) { + top: 6rem; + left: 6rem; + } + > :nth-child(5) { + top: 7.5rem; + left: 7.5rem; } } - > :nth-child(2) { - top: 3rem; - left: 3rem; - } - > :nth-child(3) { - top: 4.5rem; - left: 4.5rem; - } - > :nth-child(4) { - top: 6rem; - left: 6rem; - } - > :nth-child(5) { - top: 7.5rem; - left: 7.5rem; - } -} + // + // Code snippets + // -// -// Code snippets -// + .highlight { + position: relative; + padding: .75rem ($bd-gutter-x * .5); + background-color: var(--bd-pre-bg); -.highlight { - position: relative; - padding: .75rem ($bd-gutter-x * .5); - background-color: var(--bd-pre-bg); + @include media-breakpoint-up(md) { + padding: .75rem 1.25rem; + @include border-radius(calc(var(--bs-border-radius) - 1px)); + } - @include media-breakpoint-up(md) { - padding: .75rem 1.25rem; - @include border-radius(calc(var(--bs-border-radius) - 1px)); - } + @include media-breakpoint-up(lg) { + pre { + margin-right: 1.875rem; + } + } - @include media-breakpoint-up(lg) { pre { - margin-right: 1.875rem; + padding: .25rem 0 .875rem; + margin-top: .8125rem; + margin-bottom: 0; + overflow: overlay; + white-space: pre; + background-color: transparent; + border: 0; } - } - pre { - padding: .25rem 0 .875rem; - margin-top: .8125rem; - margin-bottom: 0; - overflow: overlay; - white-space: pre; - background-color: transparent; - border: 0; + pre code { + @include font-size(inherit); + color: var(--bs-body-color); // Effectively the base text color + word-wrap: normal; + } } - pre code { - @include font-size(inherit); - color: var(--bs-body-color); // Effectively the base text color - word-wrap: normal; + .bd-example-snippet .highlight pre { + margin-right: 0; } -} -.bd-example-snippet .highlight pre { - margin-right: 0; -} - -.highlight-toolbar { - background-color: var(--bd-pre-bg); + .highlight-toolbar { + background-color: var(--bd-pre-bg); - + .highlight { - @include border-top-radius(0); + + .highlight { + @include border-top-radius(0); + } } -} -.bd-file-ref { - .highlight-toolbar { - @include media-breakpoint-up(md) { - @include border-top-radius(calc(var(--bs-border-radius) - 1px)); + .bd-file-ref { + .highlight-toolbar { + @include media-breakpoint-up(md) { + @include border-top-radius(calc(var(--bs-border-radius) - 1px)); + } } } -} -.bd-content .bd-code-snippet { - margin-bottom: 1rem; + .bd-content .bd-code-snippet { + margin-bottom: 1rem; + } }