diff --git a/scss/_card.scss b/scss/_card.scss index ee99de756b18..5d3335ce2956 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -243,7 +243,7 @@ $card-tokens: defaults( // // Card groups lay out their cards in a row using a container query, so wrap the - // group in a query container (e.g., the `.contains-inline` utility) for the row + // group in a query container (e.g., the `.container-inline` utility) for the row // layout to take effect. Without a query container the cards remain stacked. .card-group { // The child selector allows nested `.card` within `.card-group` diff --git a/scss/_config.scss b/scss/_config.scss index 5d8bdea5d33c..5c80697452b3 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -60,7 +60,7 @@ $spacers: ( $negative-spacers: ( "-1": $spacer * -.25, - "-2": $spacer * -.5, + "-2": $spacer * -.375, ) !default; // scss-docs-end spacer-variables-maps diff --git a/scss/_dialog.scss b/scss/_dialog.scss index 00399ccf31d6..6aff8bd9aa6d 100644 --- a/scss/_dialog.scss +++ b/scss/_dialog.scss @@ -233,6 +233,7 @@ $dialog-sizes: defaults( --dialog-width: 100vw; --dialog-margin: 0; --dialog-border-radius: 0; + --dialog-border-width: 0; width: 100%; max-width: none; diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 92aaa19dab9c..925526d74e1f 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -135,7 +135,7 @@ $list-group-tokens: defaults( // // Change the layout of list group items from vertical (default) to horizontal. // The responsive variants use container queries, so wrap the list group in a - // query container (e.g., the `.contains-inline` utility) for them to take effect. + // query container (e.g., the `.container-inline` utility) for them to take effect. @include loop-breakpoints-up() using ($breakpoint, $prefix) { .#{$prefix}list-group-horizontal { diff --git a/scss/_utilities.scss b/scss/_utilities.scss index f916e5948e6f..e70d72198b4c 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -94,14 +94,16 @@ $utilities: map.merge( values: auto hidden visible scroll, ), // scss-docs-end utils-overflow + // scss-docs-start utils-container "container": ( property: container-type, - class: contains, + class: container, values: ( "inline": inline-size, "size": size, ) ), + // scss-docs-end utils-container // scss-docs-start utils-display "display": ( responsive: true, diff --git a/scss/content/_reboot.scss b/scss/content/_reboot.scss index a414eaf7a9c9..5799a383a184 100644 --- a/scss/content/_reboot.scss +++ b/scss/content/_reboot.scss @@ -121,6 +121,8 @@ $reboot-mark-tokens: defaults( background-color: var(--bg-body); // 2 -webkit-text-size-adjust: 100%; // 3 -webkit-tap-highlight-color: transparent; // 4 + container-type: inline-size; + container-name: body; } // scss-docs-end reboot-body-rules diff --git a/scss/layout/_containers.scss b/scss/layout/_containers.scss index a190197f8b5a..963992c8c6df 100644 --- a/scss/layout/_containers.scss +++ b/scss/layout/_containers.scss @@ -21,6 +21,8 @@ // 100% wide container at all breakpoints .container-fluid { @include make-container(); + container-type: inline-size; + container-name: layout; } // Responsive containers that are 100% wide until a breakpoint diff --git a/scss/layout/_grid.scss b/scss/layout/_grid.scss index ad04fa613a0f..f779c0316bfa 100644 --- a/scss/layout/_grid.scss +++ b/scss/layout/_grid.scss @@ -1,4 +1,5 @@ @use "../config" as *; +@use "breakpoints" as *; @use "../mixins/grid" as *; // TODO: check gap utilities as replacement for gutter classes from v5 @@ -22,11 +23,12 @@ --rows: 1; --gap: #{$grid-gutter-x}; + @include set-container(); + display: grid; grid-template-rows: repeat(var(--rows), 1fr); grid-template-columns: repeat(var(--columns), 1fr); gap: var(--gap); - } @include make-cssgrid(); diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index a25007af8216..7ef1eb38de75 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -11,6 +11,9 @@ @mixin make-row($gutter-x: $grid-gutter-x, $gutter-y: $grid-gutter-y) { --gutter-x: #{$gutter-x}; --gutter-y: #{$gutter-y}; + + @include set-container(); + display: flex; flex-wrap: wrap; // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed @@ -75,7 +78,7 @@ @each $breakpoint in map.keys($breakpoints) { $prefix: breakpoint-prefix($breakpoint, $breakpoints); - @include media-breakpoint-up($breakpoint, $breakpoints) { + @include container-breakpoint-up($breakpoint, $breakpoints: $breakpoints) { .#{$prefix}col { flex: 1 0 0; } @@ -135,7 +138,7 @@ @each $breakpoint in map.keys($breakpoints) { $prefix: breakpoint-prefix($breakpoint, $breakpoints); - @include media-breakpoint-up($breakpoint, $breakpoints) { + @include container-breakpoint-up($breakpoint, $breakpoints: $breakpoints) { @if $columns > 0 { @for $i from 1 through $columns { .#{$prefix}g-col-#{$i} { diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 8e179c026bed..570b8597bdb8 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -191,6 +191,9 @@ - group: Layout pages: - title: Aspect ratio + - title: Container + meta: + - added: 6.0.0 - title: Display - title: Float - title: Object fit diff --git a/site/src/components/shortcodes/ResizableExample.astro b/site/src/components/shortcodes/ResizableExample.astro index 6f389bbec44f..f470c5e4414d 100644 --- a/site/src/components/shortcodes/ResizableExample.astro +++ b/site/src/components/shortcodes/ResizableExample.astro @@ -30,6 +30,12 @@ interface Props { * @default true */ showMarkup?: boolean + /** + * Whether to show a floating badge indicating the active container query + * breakpoint for the resized container. + * @default false + */ + showBreakpoint?: boolean } const { @@ -38,7 +44,8 @@ const { className, initialWidth = '100%', minWidth = '200px', - showMarkup = true + showMarkup = true, + showBreakpoint = false } = Astro.props // Support both class and className props @@ -69,7 +76,53 @@ const simplifiedMarkup = markup.replace( style={`width: ${initialWidth}; min-width: ${minWidth};`} > + {showBreakpoint && } {showMarkup && } + + diff --git a/site/src/components/shortcodes/SpacingNotation.astro b/site/src/components/shortcodes/SpacingNotation.astro index c9adb2554e5f..4ad0fd3df60f 100644 --- a/site/src/components/shortcodes/SpacingNotation.astro +++ b/site/src/components/shortcodes/SpacingNotation.astro @@ -55,13 +55,13 @@ const capitalizedNoun = noun.charAt(0).toUpperCase() + noun.slice(1) // Multipliers for sizes `1` through `9`, mirroring the default `$spacers` map. const sizeValues = [ '$spacer * .25', + '$spacer * .375', '$spacer * .5', '$spacer * .75', '$spacer', '$spacer * 1.25', '$spacer * 1.5', '$spacer * 2', - '$spacer * 2.5', '$spacer * 3' ] --- diff --git a/site/src/content/docs/components/card.mdx b/site/src/content/docs/components/card.mdx index 2001f5b221f5..ee36664f8f37 100644 --- a/site/src/content/docs/components/card.mdx +++ b/site/src/content/docs/components/card.mdx @@ -431,9 +431,9 @@ In addition to styling the content within cards, Bootstrap includes a few option Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use `display: flex;` to become attached with uniform dimensions starting at the `sm` breakpoint. -This layout uses [container queries]([[docsref:/layout/breakpoints#container-queries]]), so wrap the card group in a query container—add the `.contains-inline` utility to a parent element—for the row layout to take effect. Without a query container, the cards remain stacked. +This layout uses [container queries]([[docsref:/layout/breakpoints#container-queries]]), so wrap the card group in a query container—add the `.container-inline` utility to a parent element—for the row layout to take effect. Without a query container, the cards remain stacked. - +
@@ -464,7 +464,7 @@ This layout uses [container queries]([[docsref:/layout/breakpoints#container-que When using card groups with footers, their content will automatically line up. - +
diff --git a/site/src/content/docs/components/list-group.mdx b/site/src/content/docs/components/list-group.mdx index bc070f0017e1..73c43f976dc5 100644 --- a/site/src/content/docs/components/list-group.mdx +++ b/site/src/content/docs/components/list-group.mdx @@ -116,13 +116,13 @@ These work great with custom content as well. Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all container sizes. Alternatively, choose a responsive variant `.{sm|md|lg|xl|2xl}:list-group-horizontal` to make a list group horizontal starting at that breakpoint’s width. -The responsive variants use [container queries]([[docsref:/layout/breakpoints#container-queries]]), so wrap the list group in a query container—add the `.contains-inline` utility to a parent element—for them to take effect. Currently **horizontal list groups cannot be combined with flush list groups.** +The responsive variants use [container queries]([[docsref:/layout/breakpoints#container-queries]]), so wrap the list group in a query container—add the `.container-inline` utility to a parent element—for them to take effect. Currently **horizontal list groups cannot be combined with flush list groups.** **ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item. `
+ code={getData('breakpoints').map((breakpoint) => `
  • An item
  • A second item
    • @@ -132,7 +132,7 @@ The responsive variants use [container queries]([[docsref:/layout/breakpoints#co Drag the handle to resize the container below and watch the list group switch between vertical and horizontal layouts as the container—not the viewport—crosses the `md` breakpoint. - +
    • An item
    • A second item
      • diff --git a/site/src/content/docs/components/stepper.mdx b/site/src/content/docs/components/stepper.mdx index e9a2e7d7cdf4..7b1b24e5ce3d 100644 --- a/site/src/content/docs/components/stepper.mdx +++ b/site/src/content/docs/components/stepper.mdx @@ -23,9 +23,9 @@ Here’s a simple example of a vertical stepper. ### Responsive -Steppers can be made horizontal at specific breakpoints using the `contains-inline` utility on a parent element and by adding the responsive `.stepper-horizontal-{breakpoint}` modifier classes on the stepper. The extra parent element is required when using container queries. +Steppers can be made horizontal at specific breakpoints using the `container-inline` utility on a parent element and by adding the responsive `.stepper-horizontal-{breakpoint}` modifier classes on the stepper. The extra parent element is required when using container queries. - +
      1. Create account
      2. Confirm email
        3. diff --git a/site/src/content/docs/getting-started/browsers-devices.mdx b/site/src/content/docs/getting-started/browsers-devices.mdx index e37976f77ec8..ae2116521468 100644 --- a/site/src/content/docs/getting-started/browsers-devices.mdx +++ b/site/src/content/docs/getting-started/browsers-devices.mdx @@ -45,7 +45,7 @@ The table below lists the platform features v6 relies on and how each behaves at | --- | --- | --- | | `light-dark()` | [Color modes]([[docsref:/customize/color-modes]]), all theme tokens | Defines the support floor; no fallback below it | | `oklch()`, `color-mix()` | [Color system]([[docsref:/customize/color]]), theme variants | Fully supported above the floor | -| Container queries (`@container`) | [Card groups]([[docsref:/components/card#card-groups]]), [horizontal list groups]([[docsref:/components/list-group#horizontal]]) | Fully supported above the floor; these components also require an ancestor query container (`.contains-inline`)—without one they stay stacked | +| Container queries (`@container`) | [Card groups]([[docsref:/components/card#card-groups]]), [horizontal list groups]([[docsref:/components/list-group#horizontal]]) | Fully supported above the floor; these components also require an ancestor query container (`.container-inline`)—without one they stay stacked | | `:has()` | Forms, button groups with menus, and other contextual styling | Fully supported above the floor | | Native `` | [Dialog]([[docsref:/components/dialog]]), [Drawer]([[docsref:/components/drawer]]) | Fully supported above the floor; focus containment and `inert` behavior come from the browser | | `
        ` | [Exclusive accordions]([[docsref:/components/accordion]]) | Fully supported above the floor; in older, unsupported browsers accordion items degrade gracefully to independently openable `
        ` elements | diff --git a/site/src/content/docs/guides/migration.mdx b/site/src/content/docs/guides/migration.mdx index dff34b594037..f313f1a934d3 100644 --- a/site/src/content/docs/guides/migration.mdx +++ b/site/src/content/docs/guides/migration.mdx @@ -94,6 +94,9 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb | Print | `.d-print-none` | `.print:d-none` | +- **Both grids now respond to their container instead of the viewport.** Every `.row` and `.grid` is a query container (`container-type: inline-size`), and the responsive grid classes—`.md:col-*`, `.md:offset-*`, `.md:row-cols-*`, `.md:g-col-*`, `.md:g-start-*`, and the `.md:g-*` gutters—are generated with `@container` queries rather than `@media` queries. A `.md:col-6` inside a narrow sidebar now splits when the *row* reaches 768px, not when the viewport does. ``, `.container`, and `.container-fluid` are query containers too, so a top-level `.row` still resolves against the page width. Note that responsive [utilities]([[docsref:/utilities/api]]) like `.md:d-flex` remain viewport-based, so the same prefix can switch at two different widths within one subtree. +- **Setting `container-type` has layout side effects.** Because `.row` and `.grid` apply layout containment, they establish a containing block for `position: absolute`/`fixed` descendants and create a stacking context. Absolutely positioned children now resolve against the row or grid, and a `z-index` on a `.col` can no longer stack above content outside its row. + ### Sass - Dropped support for Node Sass, including no longer testing any of our source CSS against it. @@ -223,8 +226,8 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb - **Rebuilt close button markup.** `.btn-close` now renders its icon via a CSS `mask-image` (`--btn-close-icon`) tinted with `background-color: currentcolor`, so the button is self-contained—no child `` is required. The filter-based dark mode approach (`$btn-close-white-filter`) has been replaced by `currentcolor` inheritance, and the `.btn-close-white` class has been removed—on dark backgrounds (e.g., `.text-bg-dark`) the icon now inherits the contrast color automatically. - **Removed `.alert-dismissible`.** Dismissible alerts no longer require the `.alert-dismissible` modifier class. Place a `.btn-close` directly inside the alert—the alert's flex layout positions it automatically. Remove any `.alert-dismissible` class from your markup. - **Restructured cards.** Borders now live on `.card-body` and `.card-list` segments rather than a single outer `.card` border. Added `--card-box-shadow` and `--card-body-gap` tokens. New variant classes: `.card-translucent` (frosted glass effect) and `.card-subtle` (themed with subtle backgrounds). Horizontal cards use a new `.card-row` class. Removed `.card-link` class. -- **Card groups now use container queries.** `.card-group` switches to its attached, equal-width row layout with a `@container` query instead of a viewport `@media` query, so it responds to the width of a parent query container rather than the viewport. Wrap the card group in a query container—e.g. add the `.contains-inline` utility to a parent element—or the cards stay stacked. -- **List group horizontal variants now use container queries.** The `.*:list-group-horizontal` classes switch between vertical and horizontal layouts with `@container` queries instead of viewport `@media` queries, responding to a parent query container rather than the viewport. Wrap the list group in a query container (e.g. `.contains-inline`) for the responsive variants to take effect. +- **Card groups now use container queries.** `.card-group` switches to its attached, equal-width row layout with a `@container` query instead of a viewport `@media` query, so it responds to the width of a parent query container rather than the viewport. Wrap the card group in a query container—e.g. add the `.container-inline` utility to a parent element—or the cards stay stacked. +- **List group horizontal variants now use container queries.** The `.*:list-group-horizontal` classes switch between vertical and horizontal layouts with `@container` queries instead of viewport `@media` queries, responding to a parent query container rather than the viewport. Wrap the list group in a query container (e.g. `.container-inline`) for the responsive variants to take effect. - **Reworked badge variants.** Badge color variants now use `.badge-subtle` and `.badge-outline` combined with `.theme-*` classes (e.g., `.badge-subtle .theme-primary`), replacing the v5 `.bg-primary` utility pattern on badges. - **Added theme variant support to pagination.** Add a `.theme-{color}` class to `.pagination` (e.g., `.pagination.theme-primary`) to color links, hover, focus, and the active page item with a semantic theme color, matching the pattern already used by alerts and accordions. - **Updated breadcrumb markup.** Breadcrumbs now use `.breadcrumb-link` as an interactive element with padding, min-height, and hover background, and explicit `.breadcrumb-divider` elements as separators between items. An empty `.breadcrumb-divider` renders a default chevron via a CSS `mask-image` (`--breadcrumb-divider-icon`) tinted with `background-color: currentcolor`; add your own SVG, text, or markup inside it to override. This replaces the v5 `--bs-breadcrumb-divider` content string on the `.breadcrumb-item::before` pseudo-element. @@ -364,13 +367,13 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb |---|---|---| | 0 | `0` | `0` | | 1 | `0.25rem` | `0.25rem` | -| 2 | `0.5rem` | `0.5rem` | -| 3 | `1rem` | `0.75rem` (new) | -| 4 | `1.5rem` | `1rem` (was key 3) | -| 5 | `3rem` | `1.25rem` (new) | -| 6 | — | `1.5rem` (was key 4) | -| 7 | — | `2rem` (new) | -| 8 | — | `2.5rem` (new) | +| 2 | `0.5rem` | `0.375rem` (new) | +| 3 | `1rem` | `0.5rem` (was key 2) | +| 4 | `1.5rem` | `0.75rem` (new) | +| 5 | `3rem` | `1rem` (was key 3) | +| 6 | — | `1.25rem` (new) | +| 7 | — | `1.5rem` (was key 4) | +| 8 | — | `2rem` (new) | | 9 | — | `3rem` (was key 5) | @@ -471,7 +474,7 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb To preserve v5 visual roundness, shift class numbers up the scale (e.g. `.rounded-1` → `.rounded-3`, `.rounded-2` → `.rounded-4`, `.rounded-3` → `.rounded-5`, `.rounded-4` → `.rounded-8`, `.rounded-5` → `.rounded-9`). The `.rounded-{top,end,bottom,start}-*` directional variants follow the same scale. - **Font weight additions.** Added `.fw-medium` (`500`) and `.fw-semibold` (`600`) utilities. v5 only had `lighter`, `light` (`300`), `normal` (`400`), `bold` (`700`), and `bolder`. -- **Negative margins limited.** Negative spacers are reduced to only `-1` (`-0.25rem`) and `-2` (`-0.5rem`), and only applied to `margin-inline-start` (`.ms--1`, `.ms--2`) and `margin-inline-end` (`.me--1`, `.me--2`). The v5 full negative margin utilities across all sides have been removed. +- **Negative margins limited.** Negative spacers are reduced to only `-1` (`-0.25rem`) and `-2` (`-0.375rem`), and only applied to `margin-inline-start` (`.ms--1`, `.ms--2`) and `margin-inline-end` (`.me--1`, `.me--2`). The v5 full negative margin utilities across all sides have been removed. - **Spacing and border utilities now use CSS logical properties.** `margin-top` → `margin-block-start`, `margin-right` → `margin-inline-end`, `padding-left` → `padding-inline-start`, `border-right` → `border-inline-end`, etc. Class names (`.mt-*`, `.me-*`, `.ps-*`, `.border-end`) remain the same, but the underlying CSS properties are now logical, improving RTL and writing-mode support. - **Text wrap additions.** Added `.text-balance` and `.text-pretty` values to the text-wrap utility. - **Color utility renames.** `.text-*` color utilities have been replaced by `.fg-*` (foreground) utilities. New `.fg-emphasis-*` and `.fg-contrast-*` variants. Background utilities now include `.bg-subtle-*` and `.bg-muted-*` in addition to `.bg-*`. Added `.fg-bg` and `.bg-fg` cross-reference utilities; removed `.fg-inherit` and `.bg-inherit`. Renamed `.bg-opacity-*` to `.bg-*`. Renamed `.text-reset` to `.fg-reset`. @@ -510,7 +513,7 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb - **Flex & Grid utilities:** - Added `.place-items` and `.justify-items` utilities. - Added `.grid-cols-*` utilities for `grid-template-columns` (1–4 and 6 column layouts), `.grid-cols-fill` for spanning all columns, `.grid-cols-subgrid` for adopting a parent grid's column tracks, and `.grid-auto-flow` utility. -- **Container query utilities.** New `.contains-inline` and `.contains-size` utilities for `container-type`. +- **Container query utilities (renamed from `.contains-*` in earlier v6 alphas).** New `.container-inline` and `.container-size` utilities for `container-type`. - Ratio helpers are now powered by the utility API and use simplified values without `calc()`. - **State variants now use prefix syntax.** Pseudo-state utility classes like hover and focus variants now use a `state:class` prefix pattern (e.g., `hover:opacity-50` instead of `opacity-50-hover`), matching the responsive prefix convention. - **Utility API cleanup.** Removed `css-var`, `css-variable-name`, and `local-vars` options from the utility API. Use the `property` map approach for CSS custom properties and `variables` for static CSS custom properties within utility classes. diff --git a/site/src/content/docs/layout/css-grid.mdx b/site/src/content/docs/layout/css-grid.mdx index 72d84a3fb364..e2f3de33e325 100644 --- a/site/src/content/docs/layout/css-grid.mdx +++ b/site/src/content/docs/layout/css-grid.mdx @@ -25,7 +25,7 @@ Bootstrap includes an optional grid system built on CSS Grid, but with a Bootstr - **Columns and gutter sizes are set via CSS variables.** Set these on the parent `.grid` and customize however you want, inline or in a stylesheet, with `--bs-columns` and `--bs-gap`. -In the future, Bootstrap will likely shift to a hybrid solution as the `gap` property has achieved nearly full browser support for flexbox. +- **Responsive classes use container queries.** Each `.grid` is a query container (`container-type: inline-size`), so responsive `.g-col-*` and `.g-start-*` classes respond to the width of the `.grid` itself rather than the viewport. ## Key differences @@ -45,7 +45,7 @@ Compared to the default grid system: ### Three columns -Three equal-width columns across all viewports and devices can be created by using the `.g-col-4` classes. Add [responsive classes](#responsive) to change the layout by viewport size. +Three equal-width columns across all container sizes and devices can be created by using the `.g-col-4` classes. Add [responsive classes](#responsive) to change the layout by the `.grid` container’s width.
        .g-col-4
        @@ -55,21 +55,71 @@ Three equal-width columns across all viewports and devices can be created by usi ### Responsive -Use responsive classes to adjust your layout across viewports. Here we start with two columns on the narrowest viewports, and then grow to three columns on medium viewports and above. +Use responsive classes to adjust your layout across breakpoints. Here we start with two columns on the narrowest containers, and then grow to three columns on medium containers and above. Drag the example’s handle to resize the `.grid` and watch the columns reflow based on its width rather than the viewport. - + +Responsive `.g-col-*` and `.g-start-*` classes are powered by [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) rather than media queries. The `.grid` is set as a query container (`container-type: inline-size`), so its grid items respond to the width of the `.grid` itself instead of the viewport. This means a `.grid` placed inside a narrow column will switch layouts based on that column’s width, not the size of the browser window. + + +
        .g-col-6 .md:g-col-4
        .g-col-6 .md:g-col-4
        .g-col-6 .md:g-col-4
`} /> -Compare that to this two column layout at all viewports. +Compare that to this two column layout at all container sizes.
.g-col-6
.g-col-6
`} /> +### Playground + +The examples above are constrained by the width of this page, so you can only resize them up to the `sm` range before running out of room. Open the fullscreen demo below to drag a set of grids across the full range of breakpoints and watch each layout reflow based on the container's width rather than the viewport. + + + + +
+

CSS Grid container queries

+ +
+
+

Drag the handle on the right edge of the example to resize it. The badge shows the active container-query breakpoint, and every grid below responds to the example's width—not the size of the browser window.

+ +
cell
+
cell
+
cell
+
cell
+
cell
+
cell
+
+
+
card
+
card
+
card
+
card
+
+
+
sidebar
+
main content
+
+
+
primary
+
secondary
+
+
+
centered with .md:g-start-4
+
`} /> +
+
+ +
+ + ## Wrapping Grid items automatically wrap to the next line when there’s no more room horizontally. Note that the `gap` applies to horizontal and vertical gaps between grid items. diff --git a/site/src/content/docs/layout/grid.mdx b/site/src/content/docs/layout/grid.mdx index 7bd1cae299e7..23020612a7dd 100644 --- a/site/src/content/docs/layout/grid.mdx +++ b/site/src/content/docs/layout/grid.mdx @@ -2,6 +2,7 @@ title: Grid system description: Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes. toc: true +js: required csstricks: url: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ label: Flexbox Guide @@ -12,7 +13,7 @@ csstricks: Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together. -**New to or unfamiliar with flexbox?** [Read this CSS Tricks flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background) for background, terminology, guidelines, and code snippets. +**Unfamiliar with flexbox?** [Read this CSS Tricks flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background) for background, terminology, guidelines, and code snippets. @@ -35,7 +36,9 @@ The above example creates three equal-width columns across all devices and viewp Breaking it down, here’s how the grid system comes together: -- **Our grid supports [six responsive breakpoints]([[docsref:/layout/breakpoints]]).** Breakpoints are based on `min-width` media queries, meaning they affect that breakpoint and all those above it (e.g., `.sm:col-4` applies to `sm`, `md`, `lg`, `xl`, and `2xl`). This means you can control container and column sizing and behavior by each breakpoint. +- **Our grid supports [six responsive breakpoints]([[docsref:/layout/breakpoints]]).** Breakpoints use `min-width` container queries, meaning they affect that breakpoint and all those above it (e.g., `.sm:col-4` applies to `sm`, `md`, `lg`, `xl`, and `2xl`). This means you can control column sizing and behavior by each breakpoint. + +- **Responsive classes respond to the `.row`, not the viewport.** Each `.row` is a query container (`container-type: inline-size`), so responsive `.col-*` classes react to the width of the `.row` itself rather than the browser window. Drop a `.row` into a narrow column and its columns reflow based on that column’s width. - **Containers center and horizontally pad your content.** Use `.container` for a responsive pixel width, `.container-fluid` for `width: 100%` across all viewports and devices, or a responsive container (e.g., `.md:container`) for a combination of fluid and pixel widths. @@ -208,13 +211,17 @@ Use `{breakpoint}:col-auto` classes to size columns based on the natural width o ## Responsive classes -Bootstrap’s grid includes six tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit. +Bootstrap’s grid includes six tiers, one for each [breakpoint]([[docsref:/layout/breakpoints]]), of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, etc. devices however you see fit. + + +Responsive `.col-*` classes are powered by [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) rather than media queries. The `.row` is set as a query container (`container-type: inline-size`), so its columns respond to the width of the `.row` itself instead of the viewport. This means a `.row` placed inside a narrow column will switch layouts based on that column’s width, not the size of the browser window. Drag the handle on the examples below to resize the `.row` and watch the columns reflow. + ### All breakpoints For grids that are the same from the smallest of devices to the largest, use the `.col` and `.col-*` classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to `.col`. - +
col
col
@@ -231,7 +238,7 @@ For grids that are the same from the smallest of devices to the largest, use the Using a single set of `.sm:col-*` classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (`sm`). - +
sm:col-8
sm:col-4
@@ -247,7 +254,7 @@ Using a single set of `.sm:col-*` classes, you can create a basic grid system th Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works. - +
.md:col-8
@@ -268,14 +275,68 @@ Don’t want your columns to simply stack in some grid tiers? Use a combination
`} /> -### Row columns +### Playground + +The examples above are constrained by the width of this page, so you can only resize them up to the `sm` range before running out of room. Open the fullscreen demo below to drag a set of rows across the full range of breakpoints and watch each layout reflow based on the `.row`’s width rather than the viewport. + + + + +
+

Flexbox grid container queries

+ +
+
+

Drag the handle on the right edge of the example to resize it. The badge shows the active container-query breakpoint, and every row below responds to the example's width—not the size of the browser window.

+ +
+
cell
+
cell
+
cell
+
cell
+
cell
+
cell
+
+
+
card
+
card
+
card
+
card
+
+
+
sidebar
+
main content
+
+
+
primary
+
secondary
+
+
+
centered with .md:offset-3
+
+
+
cell
+
cell
+
cell
+
cell
+
cell
+
cell
+
+
`} /> +
+
+ +
+ -Use the responsive `.row-cols-*` classes to quickly set the number of columns that best render your content and layout. Whereas normal `.col-*` classes apply to the individual columns (e.g., `.md:col-4`), the row columns classes are set on the parent `.row` as a shortcut. With `.row-cols-auto` you can give the columns their natural width. +### Row columns -Use these row columns classes to quickly create basic grid layouts or to control your card layouts. +Use the responsive `.row-cols-*` classes to quickly set the number of columns that best render your content and layout. Whereas normal `.col-*` classes apply to the individual columns (e.g., `.md:col-4`), the row columns classes are set on the parent `.row` as a shortcut. -
+
Column
Column
Column
@@ -283,26 +344,23 @@ Use these row columns classes to quickly create basic grid layouts or to control
`} /> +`.row-cols-*` can be used with any number 1 to 6. + -
+
Column
Column
Column
Column
-
-
`} /> - - -
-
Column
-
Column
Column
Column
`} /> +With `.row-cols-auto` you can give the columns their natural width. + -
+
Column
Column
Column
@@ -310,17 +368,21 @@ Use these row columns classes to quickly create basic grid layouts or to control
`} /> +You can also mix `.row-cols-*` with `.col-*` classes to create more complex layouts. + -
+
Column
Column
-
Column
+
Column
Column
`} /> - -
+And lastly, you can combine responsive variants. + + +
Column
Column
Column
@@ -346,7 +408,7 @@ You can also use the accompanying Sass mixin, `row-cols()`: To nest your content with the default grid, add a new `.row` and set of `.sm:col-*` columns within an existing `.sm:col-*` column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns). - +
Level 1: .sm:col-3 diff --git a/site/src/content/docs/layout/gutters.mdx b/site/src/content/docs/layout/gutters.mdx index dee4d2a56c44..8b6cce34c489 100644 --- a/site/src/content/docs/layout/gutters.mdx +++ b/site/src/content/docs/layout/gutters.mdx @@ -121,6 +121,27 @@ Gutter classes can also be added to [row columns]([[docsref:/layout/grid#row-col
`} /> +## Responsive gutters + +Resize the container below to test responsive gutter classes. The gutter width should widen as the container crosses breakpoints. + + +
+
+
Column
+
+
+
Column
+
+
+
Column
+
+
+
Column
+
+
+
`} /> + ## No gutters The gutters between columns in our predefined grid classes can be removed with `.g-0`. This removes the negative `margin`s from `.row` and the horizontal `padding` from all immediate children columns. @@ -143,9 +164,13 @@ $grid-gutter-x: 1.5rem; $gutters: ( 0: 0, 1: $spacer * .25, - 2: $spacer * .5, - 3: $spacer, - 4: $spacer * 1.5, - 5: $spacer * 3, + 2: $spacer * .375, + 3: $spacer * .5, + 4: $spacer * .75, + 5: $spacer, + 6: $spacer * 1.25, + 7: $spacer * 1.5, + 8: $spacer * 2, + 9: $spacer * 3, ); ``` diff --git a/site/src/content/docs/utilities/container.mdx b/site/src/content/docs/utilities/container.mdx new file mode 100644 index 000000000000..c48b5664ec38 --- /dev/null +++ b/site/src/content/docs/utilities/container.mdx @@ -0,0 +1,63 @@ +--- +title: Container +description: Use the container utility to set an element as a CSS query container for `@container` queries. +toc: true +mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/container-type +utility: + - container +--- + +## Container + +Set an element as a query container with the `.container-inline` or `.container-size` utility. Elements inside can then respond to the container's size rather than the viewport using `@container` queries. + +- `.container-inline` sets `container-type: inline-size`, creating a containment context on the inline axis (most common for responsive layouts). +- `.container-size` sets `container-type: size`, creating a containment context on both block and inline axes. + +```html +
+
...
+
+``` + +Without a query container, responsive container query classes (like `.md:hstack`) have no effect. + +## How it works + +Container queries let components respond to the width of a parent container instead of the viewport. This is useful when the same component appears in different layout contexts (e.g., a sidebar and a main content area). + +Resize the example below. The stack switches from vertical to horizontal when the query container—not the viewport—is at least `768px` wide. + + +
+
Item 1
+
Item 2
+
Item 3
+
+
`} /> + + +Only some responsive classes are container-driven. Grid columns, [stacks]([[docsref:/helpers/stacks]]), and the responsive component variants listed below evaluate against their query container, while responsive [utilities]([[docsref:/utilities/api]]) such as `.md:d-flex` or `.md:text-center` still evaluate against the viewport. The same `md:` prefix can therefore switch at two different widths within one subtree. + + +## Components using container queries + +Several Bootstrap components use container queries to respond to their parent container: + +- **[Navbar]([[docsref:/components/navbar]])** — The `.*:navbar-expand` classes respond to the navbar's own width. +- **[Card groups]([[docsref:/components/card#card-groups]])** — Wrap a card group in `.container-inline` to enable its row layout. +- **[List group horizontal]([[docsref:/components/list-group#horizontal]])** — Wrap a list group in `.container-inline` for responsive horizontal variants. +- **[Stepper]([[docsref:/components/stepper]])** — Wrap a stepper in `.container-inline` for responsive horizontal variants. +- **[Stacks]([[docsref:/helpers/stacks]])** — The responsive `.*:hstack` and `.*:vstack` classes respond to the nearest query container. +- **[CSS Grid]([[docsref:/layout/css-grid]])** — Each `.grid` is automatically a query container. +- **[Default Grid]([[docsref:/layout/grid]])** — Each `.row` is automatically a query container. + +The `` element and `.container`/`.container-fluid` are also query containers, named `body` and `layout` respectively, so responsive grid and gutter classes resolve against the page or the layout container when there is no closer query container. + +## CSS + +### Sass utilities API + +Container 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/content/docs/utilities/margin.mdx b/site/src/content/docs/utilities/margin.mdx index a2e7ebcbd9ce..b1910799f870 100644 --- a/site/src/content/docs/utilities/margin.mdx +++ b/site/src/content/docs/utilities/margin.mdx @@ -152,7 +152,7 @@ Bootstrap includes an `.mx-auto` class for horizontally centering fixed-width bl ## Negative margin -In CSS, `margin` properties can utilize negative values (`padding` cannot). In v6, negative margins are limited to `margin-inline-start` and `margin-inline-end` only, using spacers `-1` (`-0.25rem`) and `-2` (`-0.5rem`): +In CSS, `margin` properties can utilize negative values (`padding` cannot). In v6, negative margins are limited to `margin-inline-start` and `margin-inline-end` only, using spacers `-1` (`-0.25rem`) and `-2` (`-0.375rem`): ```html
.ms--1
diff --git a/site/src/content/docs/utilities/space.mdx b/site/src/content/docs/utilities/space.mdx index 9ad3c66a6e2a..49f21297c694 100644 --- a/site/src/content/docs/utilities/space.mdx +++ b/site/src/content/docs/utilities/space.mdx @@ -38,10 +38,14 @@ Where *size* is one of: - `0` - for classes that eliminate the spacing by setting it to `0` - `1` - (by default) for classes that set the spacing to `$spacer * .25` -- `2` - (by default) for classes that set the spacing to `$spacer * .5` -- `3` - (by default) for classes that set the spacing to `$spacer` -- `4` - (by default) for classes that set the spacing to `$spacer * 1.5` -- `5` - (by default) for classes that set the spacing to `$spacer * 3` +- `2` - (by default) for classes that set the spacing to `$spacer * .375` +- `3` - (by default) for classes that set the spacing to `$spacer * .5` +- `4` - (by default) for classes that set the spacing to `$spacer * .75` +- `5` - (by default) for classes that set the spacing to `$spacer` +- `6` - (by default) for classes that set the spacing to `$spacer * 1.25` +- `7` - (by default) for classes that set the spacing to `$spacer * 1.5` +- `8` - (by default) for classes that set the spacing to `$spacer * 2` +- `9` - (by default) for classes that set the spacing to `$spacer * 3` (You can add more sizes by adding entries to the `$spacers` Sass map variable.) @@ -89,7 +93,7 @@ Space utilities apply `margin-inline-end` or `margin-block-end` to every direct ```css :where(.space-x-3 > :not(:last-child)) { - margin-inline-end: 1rem; + margin-inline-end: 0.5rem; } ``` diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss index e3e4f04595cb..f7036cbeb745 100644 --- a/site/src/scss/_component-examples.scss +++ b/site/src/scss/_component-examples.scss @@ -62,6 +62,10 @@ --bd-example-padding: 1.5rem; } + &.bd-example-resizable { + --bd-example-padding: .375rem; + } + + p { margin-top: 2rem; } @@ -125,8 +129,8 @@ // Grid examples // - .bd-example-row [class^="col"], - .bd-example-cols [class^="col"] > *, + .bd-example-row [class*="col"], + .bd-example-cols [class*="col"] > *, .bd-example-cssgrid [class*="grid"] > * { padding-block: .75rem; background-color: color-mix(in srgb, var(--bd-violet) 15%, transparent); @@ -359,18 +363,30 @@ // Resizable examples // - .bd-example-resizable { - position: relative; - padding: .375rem; - } - .bd-resizable-container { + position: relative; max-width: 100%; padding: 1rem; overflow: hidden; resize: horizontal; background-color: var(--bs-bg-body); - @include border-radius(var(--radius-4)); + @include border-radius(var(--radius-3)); + } + + .bd-resizable-badge { + position: absolute; + inset-block-start: .5rem; + inset-inline-end: .5rem; + z-index: 2; + padding: .125rem .5rem; + font-family: var(--bs-font-mono); + font-size: .75rem; + line-height: 1.5; + color: var(--bs-fg-2); + pointer-events: none; + background-color: var(--bs-bg-body); + border: 1px solid var(--bs-border-color); + @include border-radius(var(--radius-3)); } //