- Bootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual
+ Bootstrap is evolving with each release to better utilize CSS variables for global theme styles, individual
components, and even utilities. We provide dozens of variables for colors, font styles, and more at a :root level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily
diff --git a/site/src/components/home/ComponentUtilities.astro b/site/src/components/home/ComponentUtilities.astro
index 8bf43b428f71..1278bda9e411 100644
--- a/site/src/components/home/ComponentUtilities.astro
+++ b/site/src/components/home/ComponentUtilities.astro
@@ -14,7 +14,7 @@ import Code from '@shortcodes/Code.astro'
- New in Bootstrap 5, our utilities are now generated by our Utility API. We built it as a feature-packed Sass map that can be quickly and easily customized. It's never been easier to add, remove, or modify any utility classes. Make utilities responsive, add pseudo-class variants, and give them diff --git a/site/src/components/shortcodes/JsDataAttributes.mdx b/site/src/components/shortcodes/JsDataAttributes.mdx index b7c6c0a7a858..46fa0a02a2a6 100644 --- a/site/src/components/shortcodes/JsDataAttributes.mdx +++ b/site/src/components/shortcodes/JsDataAttributes.mdx @@ -1,5 +1,5 @@ As options can be passed via data attributes or JavaScript, you can append an option name to `data-bs-`, as in `data-bs-animation="{value}"`. Make sure to change the case type of the option name from “_camelCase_” to “_kebab-case_” when passing the options via data attributes. For example, use `data-bs-custom-class="beautifier"` instead of `data-bs-customClass="beautifier"`. -As of Bootstrap 5.2.0, all components support an **experimental** reserved data attribute `data-bs-config` that can house simple component configuration as a JSON string. When an element has `data-bs-config='{"delay":0, "title":123}'` and `data-bs-title="456"` attributes, the final `title` value will be `456` and the separate data attributes will override values given on `data-bs-config`. In addition, existing data attributes are able to house JSON values like `data-bs-delay='{"show":0,"hide":150}'`. +As of v5.2.0, all components support an **experimental** reserved data attribute `data-bs-config` that can house simple component configuration as a JSON string. When an element has `data-bs-config='{"delay":0, "title":123}'` and `data-bs-title="456"` attributes, the final `title` value will be `456` and the separate data attributes will override values given on `data-bs-config`. In addition, existing data attributes are able to house JSON values like `data-bs-delay='{"show":0,"hide":150}'`. The final configuration object is the merged result of `data-bs-config`, `data-bs-`, and `js object` where the latest given key-value overrides the others. diff --git a/site/src/content/docs/about/overview.mdx b/site/src/content/docs/about/overview.mdx index efd16c543ed3..1febe5bb3acc 100644 --- a/site/src/content/docs/about/overview.mdx +++ b/site/src/content/docs/about/overview.mdx @@ -20,7 +20,9 @@ Originally [released](https://blog.x.com/developer/en_us/a/2011/bootstrap-twitte With Bootstrap 4, we once again rewrote the project to account for two key architectural changes: a migration to Sass and the move to CSS’s flexbox. Our intention is to help in a small way to move the web development community forward by pushing for newer CSS properties, fewer dependencies, and new technologies across more modern browsers. -Our latest release, Bootstrap 5, focuses on improving v4’s codebase with as few major breaking changes as possible. We improved existing features and components, removed support for older browsers, dropped jQuery for regular JavaScript, and embraced more future-friendly technologies like CSS custom properties as part of our tooling. +With Bootstrap 5, we improved existing features and components, removed support for older browsers, dropped jQuery for regular JavaScript, and embraced more future-friendly technologies like CSS custom properties as part of our tooling. + +Our latest release, Bootstrap 6, continues this work with a stronger focus on CSS variables, color modes, and a modernized component and utility system. ## Get involved diff --git a/site/src/content/docs/customize/css-variables.mdx b/site/src/content/docs/customize/css-variables.mdx index 613cd727fc4a..a86ad6b3a9ba 100644 --- a/site/src/content/docs/customize/css-variables.mdx +++ b/site/src/content/docs/customize/css-variables.mdx @@ -26,9 +26,9 @@ These variables are scoped to our built-in dark mode. ## Component variables -Bootstrap 5 is increasingly making use of custom properties as local variables for various components. This way we reduce our compiled CSS, ensure styles aren’t inherited in places like nested tables, and allow some basic restyling and extending of Bootstrap components after Sass compilation. +Bootstrap is increasingly making use of custom properties as local variables for various components. This way we reduce our compiled CSS, ensure styles aren’t inherited in places like nested tables, and allow some basic restyling and extending of Bootstrap components after Sass compilation. -Have a look at our table documentation for some [insight into how we’re using CSS variables]([[docsref:/content/tables#how-do-the-variants-and-accented-tables-work]]). Our [navbars also use CSS variables]([[docsref:/components/navbar#css]]) as of v5.2.0. We’re also using CSS variables across our grids—primarily for gutters the [new opt-in CSS grid]([[docsref:/layout/css-grid]])—with more component usage coming in the future. +Have a look at our table documentation for some [insight into how we’re using CSS variables]([[docsref:/content/tables#how-do-the-variants-and-accented-tables-work]]). Our [navbars also use CSS variables]([[docsref:/components/navbar#css]]). We’re also using CSS variables across our grids—primarily for gutters the [new opt-in CSS grid]([[docsref:/layout/css-grid]])—with more component usage coming in the future. Whenever possible, we'll assign CSS variables at the base component level (e.g., `.navbar` for navbar and its sub-components). This reduces guessing on where and how to customize, and allows for easy modifications by our team in future updates. diff --git a/site/src/content/docs/getting-started/accessibility.mdx b/site/src/content/docs/getting-started/accessibility.mdx index 7e2096d3d663..2a26e6822b83 100644 --- a/site/src/content/docs/getting-started/accessibility.mdx +++ b/site/src/content/docs/getting-started/accessibility.mdx @@ -35,7 +35,7 @@ Content which should be visually hidden, but remain accessible to assistive tech
``` -For visually hidden interactive controls, such as traditional “skip” links, use the `.visually-hidden-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). **Watch out, compared to the equivalent `.sr-only` and `.sr-only-focusable` classes in past versions, Bootstrap 5’s `.visually-hidden-focusable` is a standalone class, and must not be used in combination with the `.visually-hidden` class.** +For visually hidden interactive controls, such as traditional “skip” links, use the `.visually-hidden-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). **Watch out, compared to the equivalent `.sr-only` and `.sr-only-focusable` classes in past versions, Bootstrap’s `.visually-hidden-focusable` is a standalone class, and must not be used in combination with the `.visually-hidden` class.** ```html Skip to main content diff --git a/site/src/content/docs/layout/css-grid.mdx b/site/src/content/docs/layout/css-grid.mdx index e0134b21bce1..90e09e6a3f9d 100644 --- a/site/src/content/docs/layout/css-grid.mdx +++ b/site/src/content/docs/layout/css-grid.mdx @@ -10,12 +10,12 @@ csstricks: 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.