Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions site/src/components/home/CSSVariables.astro
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,9 @@ import Code from '@shortcodes/Code.astro'
</div>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Build and extend in real-time with CSS&nbsp;variables</h2>
<p class="lead fw-normal">
Bootstrap 5 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 <code
>:root</code
> level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily
be modified.
Bootstrap makes extensive use of CSS variables across global theme styles, individual components, and utilities.
We provide dozens of variables for colors, font styles, and more at the <code>:root</code> level for use anywhere, while
component and utility variables stay scoped to the relevant class for easy customization.
</p>
<p class="d-flex flex-column lead fw-normal mb-0">
<a
Expand Down
8 changes: 3 additions & 5 deletions site/src/components/home/ComponentUtilities.astro
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,9 @@ import Code from '@shortcodes/Code.astro'
</div>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Components, meet the Utility&nbsp;API</h2>
<p class="lead fw-normal">
New in Bootstrap 5, our utilities are now generated by our <a href={getVersionedDocsPath('utilities/api')}
>Utility API</a
>. 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
custom names.
Our utilities are generated by our <a href={getVersionedDocsPath('utilities/api')}>Utility API</a>. 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 custom names.
</p>
</div>
<div class="row md:gx-5">
Expand Down
2 changes: 1 addition & 1 deletion site/src/components/shortcodes/JsDataAttributes.mdx
Original file line number Diff line number Diff line change
@@ -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}'`.
All components support a 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.
4 changes: 3 additions & 1 deletion site/src/content/docs/about/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
In Bootstrap 5, we refined the v4 codebase with relatively few major breaking changes. We improved existing features and components, dropped support for older browsers, replaced jQuery with vanilla JavaScript, and expanded our use of CSS custom properties to modernize the framework.

Our latest release, Bootstrap 6, is a major step forward that modernizes the codebase, adopts newer build tooling, and pushes customization further with CSS variables, layers, and broader updates across our components, utilities, Sass, and JavaScript.

## Get involved

Expand Down
2 changes: 1 addition & 1 deletion site/src/content/docs/getting-started/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ Content which should be visually hidden, but remain accessible to assistive tech
</p>
```

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
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
Expand Down
2 changes: 1 addition & 1 deletion site/src/content/docs/getting-started/css-variables.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ 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 makes 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.

Expand Down
2 changes: 1 addition & 1 deletion site/src/content/docs/layout/css-grid.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ Bootstrap’s default grid system represents the culmination of over a decade of

## How it works

With Bootstrap 5, we’ve added the option to enable a separate grid system that’s built on CSS Grid, but with a Bootstrap twist. You still get classes you can apply on a whim to build responsive layouts, but with a different approach under the hood.
Bootstrap includes an optional grid system built on CSS Grid, but with a Bootstrap twist. You still get classes you can apply on a whim to build responsive layouts, but with a different approach under the hood.

- **CSS Grid is opt-in.** Disable the default grid system by setting `$enable-grid-classes: false` and enable the CSS Grid by setting `$enable-cssgrid: true`. Then, recompile your Sass.

Expand Down
Loading