From 0e7e888f8e17bd3b7dcdc526acfa81d6d254da4e Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 11 Oct 2023 07:41:02 +0300 Subject: [PATCH 001/262] Build(deps-dev): Bump postcss from 8.4.30 to 8.4.31 (#39278) Bumps [postcss](https://github.com/postcss/postcss) from 8.4.30 to 8.4.31. - [Release notes](https://github.com/postcss/postcss/releases) - [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md) - [Commits](https://github.com/postcss/postcss/compare/8.4.30...8.4.31) --- updated-dependencies: - dependency-name: postcss dependency-type: direct:development ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8e8748e86f..702f88f3c1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -56,7 +56,7 @@ "lockfile-lint": "^4.12.1", "nodemon": "^3.0.1", "npm-run-all2": "^6.0.6", - "postcss": "^8.4.30", + "postcss": "^8.4.31", "postcss-cli": "^10.1.0", "rollup": "^3.29.3", "rollup-plugin-istanbul": "^4.0.0", @@ -8579,9 +8579,9 @@ } }, "node_modules/postcss": { - "version": "8.4.30", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz", - "integrity": "sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==", + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", "dev": true, "funding": [ { @@ -17593,9 +17593,9 @@ "dev": true }, "postcss": { - "version": "8.4.30", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz", - "integrity": "sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==", + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", "dev": true, "requires": { "nanoid": "^3.3.6", diff --git a/package.json b/package.json index abbbe662d9..3b113dbbd3 100644 --- a/package.json +++ b/package.json @@ -140,7 +140,7 @@ "lockfile-lint": "^4.12.1", "nodemon": "^3.0.1", "npm-run-all2": "^6.0.6", - "postcss": "^8.4.30", + "postcss": "^8.4.31", "postcss-cli": "^10.1.0", "rollup": "^3.29.3", "rollup-plugin-istanbul": "^4.0.0", From 7cdfa426088fddf8be61e18f9bb4f541456ff51b Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 11 Oct 2023 07:41:44 +0300 Subject: [PATCH 002/262] Build(deps-dev): Bump autoprefixer from 10.4.15 to 10.4.16 (#39269) Bumps [autoprefixer](https://github.com/postcss/autoprefixer) from 10.4.15 to 10.4.16. - [Release notes](https://github.com/postcss/autoprefixer/releases) - [Changelog](https://github.com/postcss/autoprefixer/blob/main/CHANGELOG.md) - [Commits](https://github.com/postcss/autoprefixer/compare/10.4.15...10.4.16) --- updated-dependencies: - dependency-name: autoprefixer dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 34 +++++++++++++++++----------------- package.json | 2 +- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index 702f88f3c1..97287bb1e2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,7 @@ "@rollup/plugin-commonjs": "^25.0.4", "@rollup/plugin-node-resolve": "^15.2.1", "@rollup/plugin-replace": "^5.0.2", - "autoprefixer": "^10.4.15", + "autoprefixer": "^10.4.16", "bundlewatch": "^0.3.3", "clean-css-cli": "^5.6.2", "cross-env": "^7.0.3", @@ -2879,9 +2879,9 @@ } }, "node_modules/autoprefixer": { - "version": "10.4.15", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz", - "integrity": "sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==", + "version": "10.4.16", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz", + "integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==", "dev": true, "funding": [ { @@ -2899,8 +2899,8 @@ ], "dependencies": { "browserslist": "^4.21.10", - "caniuse-lite": "^1.0.30001520", - "fraction.js": "^4.2.0", + "caniuse-lite": "^1.0.30001538", + "fraction.js": "^4.3.6", "normalize-range": "^0.1.2", "picocolors": "^1.0.0", "postcss-value-parser": "^4.2.0" @@ -3507,9 +3507,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001534", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001534.tgz", - "integrity": "sha512-vlPVrhsCS7XaSh2VvWluIQEzVhefrUQcEsQWSS5A5V+dM07uv1qHeQzAOTGIMy9i3e9bH15+muvI/UHojVgS/Q==", + "version": "1.0.30001547", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001547.tgz", + "integrity": "sha512-W7CrtIModMAxobGhz8iXmDfuJiiKg1WADMO/9x7/CLNin5cpSbuBjooyoIUVB5eyCc36QuTVlkVa1iB2S5+/eA==", "dev": true, "funding": [ { @@ -13461,14 +13461,14 @@ "dev": true }, "autoprefixer": { - "version": "10.4.15", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz", - "integrity": "sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==", + "version": "10.4.16", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz", + "integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==", "dev": true, "requires": { "browserslist": "^4.21.10", - "caniuse-lite": "^1.0.30001520", - "fraction.js": "^4.2.0", + "caniuse-lite": "^1.0.30001538", + "fraction.js": "^4.3.6", "normalize-range": "^0.1.2", "picocolors": "^1.0.0", "postcss-value-parser": "^4.2.0" @@ -13890,9 +13890,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001534", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001534.tgz", - "integrity": "sha512-vlPVrhsCS7XaSh2VvWluIQEzVhefrUQcEsQWSS5A5V+dM07uv1qHeQzAOTGIMy9i3e9bH15+muvI/UHojVgS/Q==", + "version": "1.0.30001547", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001547.tgz", + "integrity": "sha512-W7CrtIModMAxobGhz8iXmDfuJiiKg1WADMO/9x7/CLNin5cpSbuBjooyoIUVB5eyCc36QuTVlkVa1iB2S5+/eA==", "dev": true }, "chainsaw": { diff --git a/package.json b/package.json index 3b113dbbd3..2d415c0a08 100644 --- a/package.json +++ b/package.json @@ -111,7 +111,7 @@ "@rollup/plugin-commonjs": "^25.0.4", "@rollup/plugin-node-resolve": "^15.2.1", "@rollup/plugin-replace": "^5.0.2", - "autoprefixer": "^10.4.15", + "autoprefixer": "^10.4.16", "bundlewatch": "^0.3.3", "clean-css-cli": "^5.6.2", "cross-env": "^7.0.3", From 790dc807533c7c62ef19e50d80d8d0fa8d275c8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 12 Oct 2023 09:31:14 +0200 Subject: [PATCH 003/262] Fix `getOrCreateInstance()` doc example (#39281) --- site/content/docs/5.3/components/popovers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.3/components/popovers.md b/site/content/docs/5.3/components/popovers.md index 685d2c3c64..f4697a7716 100644 --- a/site/content/docs/5.3/components/popovers.md +++ b/site/content/docs/5.3/components/popovers.md @@ -249,7 +249,7 @@ const popover = new bootstrap.Popover(element, { const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance // setContent example -myPopover.setContent({ +popover.setContent({ '.popover-header': 'another title', '.popover-body': 'another content' }) From 72d6722b34e075f9d720c9030b7fbbec68f7f5c4 Mon Sep 17 00:00:00 2001 From: oliv37 Date: Fri, 13 Oct 2023 07:41:40 +0200 Subject: [PATCH 004/262] Docs: fix emphasis text utilities usage in Utilities > Background (#39293) --- site/content/docs/5.3/utilities/background.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.3/utilities/background.md b/site/content/docs/5.3/utilities/background.md index c17ed84706..8f1ca5dcad 100644 --- a/site/content/docs/5.3/utilities/background.md +++ b/site/content/docs/5.3/utilities/background.md @@ -22,7 +22,7 @@ Background utilities like `.bg-*` that generated from our original `$theme-color {{< colors.inline >}} {{- range (index $.Site.Data "theme-colors") }}
.bg-{{ .name }}
-
.bg-{{ .name }}-subtle
+
.bg-{{ .name }}-subtle
{{- end -}} {{< /colors.inline >}}

.bg-body-secondary

From ce114117a8710016022c40e717cb1f3ec95a5d7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Fri, 13 Oct 2023 10:28:08 +0200 Subject: [PATCH 005/262] Tests: update navbar in visual modal test (#39294) --- js/tests/visual/modal.html | 34 +++++++++++++++++++--------------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html index 09d42333d8..efb5127b5a 100644 --- a/js/tests/visual/modal.html +++ b/js/tests/visual/modal.html @@ -13,21 +13,25 @@ - {{< /example >}} -When modifying via Sass, the [quote](https://sass-lang.com/documentation/modules/string#quote) function is required to generate the quotes around a string. For example, using `>` as the divider, you can use this: +When modifying via Sass, the [quote](https://sass-lang.com/documentation/modules/string/#quote) function is required to generate the quotes around a string. For example, using `>` as the divider, you can use this: ```scss $breadcrumb-divider: quote(">"); diff --git a/site/content/docs/5.3/components/dropdowns.md b/site/content/docs/5.3/components/dropdowns.md index 6e3811f1f1..78a6043c22 100644 --- a/site/content/docs/5.3/components/dropdowns.md +++ b/site/content/docs/5.3/components/dropdowns.md @@ -10,7 +10,7 @@ toc: true Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision](https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/). -Dropdowns are built on a third party library, [Popper](https://popper.js.org/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{< param "cdn.popper" >}}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper. Popper isn't used to position dropdowns in navbars though as dynamic positioning isn't required. +Dropdowns are built on a third party library, [Popper](https://popper.js.org/docs/v2/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{< param "cdn.popper" >}}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper. Popper isn't used to position dropdowns in navbars though as dynamic positioning isn't required. ## Accessibility diff --git a/site/content/docs/5.3/components/popovers.md b/site/content/docs/5.3/components/popovers.md index f4697a7716..940e372ebe 100644 --- a/site/content/docs/5.3/components/popovers.md +++ b/site/content/docs/5.3/components/popovers.md @@ -10,7 +10,7 @@ toc: true Things to know when using the popover plugin: -- Popovers rely on the third party library [Popper](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Popper. +- Popovers rely on the third party library [Popper](https://popper.js.org/docs/v2/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Popper. - Popovers require the [popover plugin]({{< docsref "/components/popovers" >}}) as a dependency. - Popovers are opt-in for performance reasons, so **you must initialize them yourself**. - Zero-length `title` and `content` values will never show a popover. @@ -186,7 +186,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt | `allowList` | object | [Default value]({{< docsref "/getting-started/javascript#sanitizer" >}}) | Object which contains allowed attributes and tags. | | `animation` | boolean | `true` | Apply a CSS fade transition to the popover. | | `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the popover (applies only to Popper's preventOverflow modifier). By default, it's `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). | -| `container` | string, element, false | `false` | Appends the popover to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize. | +| `container` | string, element, false | `false` | Appends the popover to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize. | | `content` | string, element, function | `''` | The popover's text content. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. | | `customClass` | string, function | `''` | Add classes to the popover when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: `'class-1 class-2'`. You can also pass a function that should return a single string containing additional class names. | | `delay` | number, object | `0` | Delay showing and hiding the popover (ms)—doesn't apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }`. | diff --git a/site/content/docs/5.3/components/tooltips.md b/site/content/docs/5.3/components/tooltips.md index 91adacc7f1..a15c181a3e 100644 --- a/site/content/docs/5.3/components/tooltips.md +++ b/site/content/docs/5.3/components/tooltips.md @@ -10,7 +10,7 @@ toc: true Things to know when using the tooltip plugin: -- Tooltips rely on the third party library [Popper](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Popper. +- Tooltips rely on the third party library [Popper](https://popper.js.org/docs/v2/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Popper. - Tooltips are opt-in for performance reasons, so **you must initialize them yourself**. - Tooltips with zero-length titles are never displayed. - Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc). @@ -200,7 +200,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt | `allowList` | object | [Default value]({{< docsref "/getting-started/javascript#sanitizer" >}}) | Object which contains allowed attributes and tags. | | `animation` | boolean | `true` | Apply a CSS fade transition to the tooltip. | | `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the tooltip (applies only to Popper's preventOverflow modifier). By default, it's `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). | -| `container` | string, element, false | `false` | Appends the tooltip to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize. | +| `container` | string, element, false | `false` | Appends the tooltip to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize. | | `customClass` | string, function | `''` | Add classes to the tooltip when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: `'class-1 class-2'`. You can also pass a function that should return a single string containing additional class names. | | `delay` | number, object | `0` | Delay showing and hiding the tooltip (ms)—doesn't apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }`. | | `fallbackPlacements` | array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements). | diff --git a/site/content/docs/5.3/customize/optimize.md b/site/content/docs/5.3/customize/optimize.md index 2622f88dbd..fc65628d50 100644 --- a/site/content/docs/5.3/customize/optimize.md +++ b/site/content/docs/5.3/customize/optimize.md @@ -74,7 +74,7 @@ Whenever possible, be sure to compress all the code you serve to your visitors. While minifying and using compression might seem like enough, making your files non-blocking ones is also a big step in making your site well-optimized and fast enough. -If you are using a [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) plugin in Google Chrome, you may have stumbled over FCP. [The First Contentful Paint](https://web.dev/fcp/) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen. +If you are using a [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) plugin in Google Chrome, you may have stumbled over FCP. [The First Contentful Paint](https://web.dev/articles/fcp) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen. You can improve FCP by deferring non-critical JavaScript or CSS. What does that mean? Simply, JavaScript or stylesheets that don't need to be present on the first paint of your page should be marked with `async` or `defer` attributes. @@ -82,8 +82,8 @@ This ensures that the less important resources are loaded later and not blocking If you want to learn more about this, there are already a lot of great articles about it: -- -- +- +- ## Always use HTTPS diff --git a/site/content/docs/5.3/customize/sass.md b/site/content/docs/5.3/customize/sass.md index a2b2bb26ca..b585aecbb0 100644 --- a/site/content/docs/5.3/customize/sass.md +++ b/site/content/docs/5.3/customize/sass.md @@ -101,7 +101,7 @@ npm install -g sass sass --watch ./scss/custom.scss ./css/custom.css ``` -Learn more about your options at [sass-lang.com/install](https://sass-lang.com/install) and [compiling with VS Code](https://code.visualstudio.com/docs/languages/css#_transpiling-sass-and-less-into-css). +Learn more about your options at [sass-lang.com/install](https://sass-lang.com/install/) and [compiling with VS Code](https://code.visualstudio.com/docs/languages/css#_transpiling-sass-and-less-into-css). {{< callout info >}} **Using Bootstrap with another build tool?** Consider reading our guides for compiling with [Webpack]({{< docsref "/getting-started/webpack" >}}), [Parcel]({{< docsref "/getting-started/parcel" >}}), or [Vite]({{< docsref "/getting-started/vite" >}}). We also have production-ready demos in [our examples repository on GitHub](https://github.com/twbs/examples). diff --git a/site/content/docs/5.3/getting-started/browsers-devices.md b/site/content/docs/5.3/getting-started/browsers-devices.md index f75fed85cb..0a4a6ce2f6 100644 --- a/site/content/docs/5.3/getting-started/browsers-devices.md +++ b/site/content/docs/5.3/getting-started/browsers-devices.md @@ -56,7 +56,7 @@ Internet Explorer is not supported. **If you require Internet Explorer support, ### Overflow and scrolling -Support for `overflow: hidden;` on the `` element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the `` content will begin to scroll. See [Chrome bug #175502](https://bugs.chromium.org/p/chromium/issues/detail?id=175502) (fixed in Chrome v40) and [WebKit bug #153852](https://bugs.webkit.org/show_bug.cgi?id=153852). +Support for `overflow: hidden;` on the `` element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the `` content will begin to scroll. See [Chrome bug #175502](https://issues.chromium.org/issues/40301599) (fixed in Chrome v40) and [WebKit bug #153852](https://bugs.webkit.org/show_bug.cgi?id=153852). ### iOS text fields and scrolling diff --git a/site/content/docs/5.3/getting-started/contents.md b/site/content/docs/5.3/getting-started/contents.md index 88632b6d5b..b53bffc740 100644 --- a/site/content/docs/5.3/getting-started/contents.md +++ b/site/content/docs/5.3/getting-started/contents.md @@ -62,7 +62,7 @@ bootstrap/ └── bootstrap.min.js.map ``` -This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/). +This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://web.dev/articles/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/docs/v2/). ### CSS files diff --git a/site/content/docs/5.3/getting-started/contribute.md b/site/content/docs/5.3/getting-started/contribute.md index 4d6d405c30..3b517bd9c5 100644 --- a/site/content/docs/5.3/getting-started/contribute.md +++ b/site/content/docs/5.3/getting-started/contribute.md @@ -38,7 +38,7 @@ Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/packag ## Sass -Bootstrap uses [Dart Sass](https://sass-lang.com/dart-sass) for compiling our Sass source files into CSS files (included in our build process), and we recommend you do the same if you're compiling Sass using your own asset pipeline. We previously used Node Sass for Bootstrap v4, but LibSass and packages built on top of it, including Node Sass, are now [deprecated](https://sass-lang.com/blog/libsass-is-deprecated). +Bootstrap uses [Dart Sass](https://sass-lang.com/dart-sass/) for compiling our Sass source files into CSS files (included in our build process), and we recommend you do the same if you're compiling Sass using your own asset pipeline. We previously used Node Sass for Bootstrap v4, but LibSass and packages built on top of it, including Node Sass, are now [deprecated](https://sass-lang.com/blog/libsass-is-deprecated/). Dart Sass uses a rounding precision of 10 and for efficiency reasons does not allow adjustment of this value. We don't lower this precision during further processing of our generated CSS, such as during minification, but if you chose to do so we recommend maintaining a precision of at least 6 to prevent issues with browser rounding. diff --git a/site/content/docs/5.3/getting-started/download.md b/site/content/docs/5.3/getting-started/download.md index 16845ddc3c..2d0d627627 100644 --- a/site/content/docs/5.3/getting-started/download.md +++ b/site/content/docs/5.3/getting-started/download.md @@ -102,7 +102,7 @@ yarn add bootstrap@{{< param "current_version" >}} ### RubyGems -Install Bootstrap in your Ruby apps using [Bundler](https://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](https://bundler.io/gemfile.html): +Install Bootstrap in your Ruby apps using [Bundler](https://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](https://bundler.io/guides/gemfile.html): ```ruby gem 'bootstrap', '~> {{< param current_ruby_version >}}' @@ -126,7 +126,7 @@ composer require twbs/bootstrap:{{< param current_version >}} ### NuGet -If you develop in .NET Framework, you can also install and manage Bootstrap's [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/bootstrap.sass/) and JavaScript using [NuGet](https://www.nuget.org/). Newer projects should use [libman](https://docs.microsoft.com/en-us/aspnet/core/client-side/libman/) or another method as NuGet is designed for compiled code, not frontend assets. +If you develop in .NET Framework, you can also install and manage Bootstrap's [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/bootstrap.sass/) and JavaScript using [NuGet](https://www.nuget.org/). Newer projects should use [libman](https://learn.microsoft.com/en-us/aspnet/core/client-side/libman/) or another method as NuGet is designed for compiled code, not frontend assets. ```powershell Install-Package bootstrap diff --git a/site/content/docs/5.3/getting-started/introduction.md b/site/content/docs/5.3/getting-started/introduction.md index 538d319243..b0f7dabc5e 100644 --- a/site/content/docs/5.3/getting-started/introduction.md +++ b/site/content/docs/5.3/getting-started/introduction.md @@ -50,7 +50,7 @@ Get started by including Bootstrap's production-ready CSS and JavaScript via CDN ``` - You can also include [Popper](https://popper.js.org/) and our JS separately. If you don't plan to use dropdowns, popovers, or tooltips, save some kilobytes by not including Popper. + You can also include [Popper](https://popper.js.org/docs/v2/) and our JS separately. If you don't plan to use dropdowns, popovers, or tooltips, save some kilobytes by not including Popper. ```html @@ -87,14 +87,14 @@ Curious which components explicitly require our JavaScript and Popper? If you're - Buttons for toggling states and checkbox/radio functionality - Carousel for all slide behaviors, controls, and indicators - Collapse for toggling visibility of content -- Dropdowns for displaying and positioning (also requires [Popper](https://popper.js.org/)) +- Dropdowns for displaying and positioning (also requires [Popper](https://popper.js.org/docs/v2/)) - Modals for displaying, positioning, and scroll behavior - Navbar for extending our Collapse and Offcanvas plugins to implement responsive behaviors - Navs with the Tab plugin for toggling content panes - Offcanvases for displaying, positioning, and scroll behavior - Scrollspy for scroll behavior and navigation updates - Toasts for displaying and dismissing -- Tooltips and popovers for displaying and positioning (also requires [Popper](https://popper.js.org/)) +- Tooltips and popovers for displaying and positioning (also requires [Popper](https://popper.js.org/docs/v2/)) ## Important globals @@ -147,7 +147,7 @@ Stay up-to-date on the development of Bootstrap and reach out to the community w - Read and subscribe to [The Official Bootstrap Blog]({{< param blog >}}). - Ask questions and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions). -- Discuss, ask questions, and more on [the community Discord](https://discord.gg/bZUvakRU3M) or [Bootstrap subreddit](https://reddit.com/r/bootstrap). +- Discuss, ask questions, and more on [the community Discord](https://discord.gg/bZUvakRU3M) or [Bootstrap subreddit](https://www.reddit.com/r/bootstrap/). - Chat with fellow Bootstrappers in IRC. On the `irc.libera.chat` server, in the `#bootstrap` channel. - Implementation help may be found at Stack Overflow (tagged [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5)). - Developers should use the keyword `bootstrap` on packages that modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/search?q=keywords:bootstrap) or similar delivery mechanisms for maximum discoverability. diff --git a/site/content/docs/5.3/getting-started/javascript.md b/site/content/docs/5.3/getting-started/javascript.md index afa4ccd81e..47f7341c35 100644 --- a/site/content/docs/5.3/getting-started/javascript.md +++ b/site/content/docs/5.3/getting-started/javascript.md @@ -95,7 +95,7 @@ To fix this, you can use an `importmap` to resolve the arbitrary module names to Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. -Our dropdowns, popovers, and tooltips also depend on [Popper](https://popper.js.org/). +Our dropdowns, popovers, and tooltips also depend on [Popper](https://popper.js.org/docs/v2/). ## Data attributes diff --git a/site/content/docs/5.3/getting-started/rtl.md b/site/content/docs/5.3/getting-started/rtl.md index 156f205639..30a1ca527f 100644 --- a/site/content/docs/5.3/getting-started/rtl.md +++ b/site/content/docs/5.3/getting-started/rtl.md @@ -170,7 +170,7 @@ After running Sass then RTLCSS, each selector in your CSS files will be prepende ## The breadcrumb case -The [breadcrumb separator]({{< docsref "/components/breadcrumb" >}}/#changing-the-separator) is the only case requiring its own brand-new variable— namely `$breadcrumb-divider-flipped` —defaulting to `$breadcrumb-divider`. +The [breadcrumb separator]({{< docsref "/components/breadcrumb#dividers" >}}) is the only case requiring its own brand-new variable— namely `$breadcrumb-divider-flipped` —defaulting to `$breadcrumb-divider`. ## Additional resources diff --git a/site/content/docs/5.3/layout/breakpoints.md b/site/content/docs/5.3/layout/breakpoints.md index 1667fd9d11..1799503baa 100644 --- a/site/content/docs/5.3/layout/breakpoints.md +++ b/site/content/docs/5.3/layout/breakpoints.md @@ -41,7 +41,7 @@ For more information and examples on how to modify our Sass maps and variables, ## Media queries -Since Bootstrap is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes. +Since Bootstrap is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes. ### Min-width diff --git a/site/content/docs/5.3/utilities/api.md b/site/content/docs/5.3/utilities/api.md index aa7d6b88bd..ec9e593318 100644 --- a/site/content/docs/5.3/utilities/api.md +++ b/site/content/docs/5.3/utilities/api.md @@ -7,7 +7,7 @@ aliases: "/docs/5.3/utilities/" toc: true --- -Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you're unfamiliar with Sass maps, read up on the [official Sass docs](https://sass-lang.com/documentation/values/maps) to get started. +Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you're unfamiliar with Sass maps, read up on the [official Sass docs](https://sass-lang.com/documentation/values/maps/) to get started. The `$utilities` map contains all our utilities and is later merged with your custom `$utilities` map, if present. The utility map contains a keyed list of utility groups which accept the following options: @@ -521,7 +521,7 @@ $utilities: map-merge( ### Remove utilities -Remove any of the default utilities with the [`map-remove()` Sass function](https://sass-lang.com/documentation/modules/map#remove). +Remove any of the default utilities with the [`map-remove()` Sass function](https://sass-lang.com/documentation/modules/map/#remove). ```scss @import "bootstrap/scss/functions"; @@ -537,7 +537,7 @@ $utilities: map-remove($utilities, "width", "float"); @import "bootstrap/scss/utilities/api"; ``` -You can also use the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map#merge) and set the group key to `null` to remove the utility. +You can also use the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map/#merge) and set the group key to `null` to remove the utility. ```scss @import "bootstrap/scss/functions"; @@ -559,7 +559,7 @@ $utilities: map-merge( ### Add, remove, modify -You can add, remove, and modify many utilities all at once with the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map#merge). Here's how you can combine the previous examples into one larger map. +You can add, remove, and modify many utilities all at once with the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map/#merge). Here's how you can combine the previous examples into one larger map. ```scss @import "bootstrap/scss/functions"; diff --git a/site/data/icons.yml b/site/data/icons.yml index 6dafbe83fc..7258ecab63 100644 --- a/site/data/icons.yml +++ b/site/data/icons.yml @@ -4,13 +4,13 @@ preferred: - name: Feather website: https://feathericons.com/ - name: Octicons - website: https://primer.style/octicons/ + website: https://primer.style/foundations/icons more: - name: Bytesize website: https://github.com/danklammer/bytesize-icons - name: CoreUI Icons - website: https://icons.coreui.io/ + website: https://coreui.io/icons/ - name: Google Material icons website: https://fonts.google.com/icons - name: Ionicons @@ -24,4 +24,4 @@ more: - name: icofont website: https://icofont.com/ - name: Tabler Icons - website: https://tabler-icons.io/ + website: https://tabler.io/icons diff --git a/site/data/translations.yml b/site/data/translations.yml index 803bb5cbfb..81bf8c2f39 100644 --- a/site/data/translations.yml +++ b/site/data/translations.yml @@ -41,4 +41,4 @@ - name: Spanish code: es description: Bootstrap 5 Español - url: https://bootstrap.esdocu.com/ + url: https://esdocu.net/bootstrap/comenzando/ From 2c4e1cd660ee03e1fc9f2804487ae8c567d8d1e3 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 5 Mar 2024 08:12:38 +0200 Subject: [PATCH 143/262] Improve front matter "added" params Add missing ones and add the ability to show or hide the badge Fixes a few more 404 errors in the version picker --- site/content/docs/5.3/components/placeholders.md | 3 ++- site/content/docs/5.3/customize/color-modes.md | 3 ++- site/content/docs/5.3/getting-started/contribute.md | 3 +++ site/content/docs/5.3/getting-started/vite.md | 3 +++ site/content/docs/5.3/helpers/color-background.md | 3 ++- site/content/docs/5.3/helpers/focus-ring.md | 3 ++- site/content/docs/5.3/helpers/icon-link.md | 3 ++- site/content/docs/5.3/helpers/stacks.md | 3 ++- site/content/docs/5.3/helpers/vertical-rule.md | 3 ++- site/content/docs/5.3/layout/css-grid.md | 3 ++- site/content/docs/5.3/utilities/link.md | 3 ++- site/content/docs/5.3/utilities/object-fit.md | 2 ++ site/content/docs/5.3/utilities/opacity.md | 3 ++- site/content/docs/5.3/utilities/z-index.md | 3 ++- site/layouts/_default/docs.html | 5 +++-- site/layouts/partials/docs-versions.html | 6 +++--- 16 files changed, 36 insertions(+), 16 deletions(-) diff --git a/site/content/docs/5.3/components/placeholders.md b/site/content/docs/5.3/components/placeholders.md index 8317b11846..4014b1e9c1 100644 --- a/site/content/docs/5.3/components/placeholders.md +++ b/site/content/docs/5.3/components/placeholders.md @@ -4,7 +4,8 @@ title: Placeholders description: Use loading placeholders for your components or pages to indicate something may still be loading. group: components toc: true -added: "5.1" +added: + version: "5.1" --- ## About diff --git a/site/content/docs/5.3/customize/color-modes.md b/site/content/docs/5.3/customize/color-modes.md index 945d5ec336..ea6db28901 100644 --- a/site/content/docs/5.3/customize/color-modes.md +++ b/site/content/docs/5.3/customize/color-modes.md @@ -4,7 +4,8 @@ title: Color modes description: Bootstrap now supports color modes, or themes, as of v5.3.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template. group: customize toc: true -added: "5.3" +added: + version: "5.3" --- {{< callout >}} diff --git a/site/content/docs/5.3/getting-started/contribute.md b/site/content/docs/5.3/getting-started/contribute.md index 3b517bd9c5..5ab3f0aa37 100644 --- a/site/content/docs/5.3/getting-started/contribute.md +++ b/site/content/docs/5.3/getting-started/contribute.md @@ -5,6 +5,9 @@ description: Help develop Bootstrap with our documentation build scripts and tes group: getting-started toc: true aliases: "/docs/5.3/getting-started/build-tools/" +added: + show_badge: false + version: "5.1" --- ## Tooling setup diff --git a/site/content/docs/5.3/getting-started/vite.md b/site/content/docs/5.3/getting-started/vite.md index 33b76d3df6..653d7a9c5a 100644 --- a/site/content/docs/5.3/getting-started/vite.md +++ b/site/content/docs/5.3/getting-started/vite.md @@ -5,6 +5,9 @@ description: The official guide for how to include and bundle Bootstrap's CSS an group: getting-started toc: true thumbnail: guides/bootstrap-vite@2x.png +added: + show_badge: false + version: "5.2" --- diff --git a/site/content/docs/5.3/helpers/color-background.md b/site/content/docs/5.3/helpers/color-background.md index d64ca43391..780662e964 100644 --- a/site/content/docs/5.3/helpers/color-background.md +++ b/site/content/docs/5.3/helpers/color-background.md @@ -4,7 +4,8 @@ title: Color and background description: Set a background color with contrasting foreground color. group: helpers toc: true -added: "5.2" +added: + version: "5.2" --- ## Overview diff --git a/site/content/docs/5.3/helpers/focus-ring.md b/site/content/docs/5.3/helpers/focus-ring.md index fa36bf8ce0..5a4e0f0faf 100644 --- a/site/content/docs/5.3/helpers/focus-ring.md +++ b/site/content/docs/5.3/helpers/focus-ring.md @@ -4,7 +4,8 @@ title: Focus ring description: Utility classes that allows you to add and modify custom focus ring styles to elements and components. group: helpers toc: true -added: "5.3" +added: + version: "5.3" --- The `.focus-ring` helper removes the default `outline` on `:focus`, replacing it with a `box-shadow` that can be more broadly customized. The new shadow is made up of a series of CSS variables, inherited from the `:root` level, that can be modified for any element or component. diff --git a/site/content/docs/5.3/helpers/icon-link.md b/site/content/docs/5.3/helpers/icon-link.md index ec63c5b8c8..1e5cc8b127 100644 --- a/site/content/docs/5.3/helpers/icon-link.md +++ b/site/content/docs/5.3/helpers/icon-link.md @@ -4,7 +4,8 @@ title: Icon link description: Quickly create stylized hyperlinks with Bootstrap Icons or other icons. group: helpers toc: true -added: 5.3 +added: + version: "5.3" --- The icon link helper component modifies our default link styles to enhance their appearance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default `gap` value. We stylize the underline with a custom offset and color. Icons are automatically sized to `1em` to best match their associated text's `font-size`. diff --git a/site/content/docs/5.3/helpers/stacks.md b/site/content/docs/5.3/helpers/stacks.md index ffe434188b..f85a7533ea 100644 --- a/site/content/docs/5.3/helpers/stacks.md +++ b/site/content/docs/5.3/helpers/stacks.md @@ -4,7 +4,8 @@ title: Stacks description: Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever. group: helpers toc: true -added: "5.1" +added: + version: "5.1" --- Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source [Pylon project](https://almonk.github.io/pylon/). diff --git a/site/content/docs/5.3/helpers/vertical-rule.md b/site/content/docs/5.3/helpers/vertical-rule.md index 130f97b8a6..9e5981f226 100644 --- a/site/content/docs/5.3/helpers/vertical-rule.md +++ b/site/content/docs/5.3/helpers/vertical-rule.md @@ -4,7 +4,8 @@ title: Vertical rule description: Use the custom vertical rule helper to create vertical dividers like the `
` element. group: helpers toc: true -added: "5.1" +added: + version: "5.1" --- ## How it works diff --git a/site/content/docs/5.3/layout/css-grid.md b/site/content/docs/5.3/layout/css-grid.md index 397733c8a2..c79c4ce0f4 100644 --- a/site/content/docs/5.3/layout/css-grid.md +++ b/site/content/docs/5.3/layout/css-grid.md @@ -4,7 +4,8 @@ title: CSS Grid description: Learn how to enable, use, and customize our alternate layout system built on CSS Grid with examples and code snippets. group: layout toc: true -added: "5.1" +added: + version: "5.1" --- Bootstrap's default grid system represents the culmination of over a decade of CSS layout techniques, tried and tested by millions of people. But, it was also created without many of the modern CSS features and techniques we're seeing in browsers like the new CSS Grid. diff --git a/site/content/docs/5.3/utilities/link.md b/site/content/docs/5.3/utilities/link.md index 668af8c237..2623f8029e 100644 --- a/site/content/docs/5.3/utilities/link.md +++ b/site/content/docs/5.3/utilities/link.md @@ -4,7 +4,8 @@ title: Link description: Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more. group: utilities toc: true -added: 5.3 +added: + version: "5.3" --- ## Link opacity diff --git a/site/content/docs/5.3/utilities/object-fit.md b/site/content/docs/5.3/utilities/object-fit.md index babc70a697..732a8fec98 100644 --- a/site/content/docs/5.3/utilities/object-fit.md +++ b/site/content/docs/5.3/utilities/object-fit.md @@ -4,6 +4,8 @@ title: Object fit description: Use the object fit utilities to modify how the content of a [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), such as an `` or `