diff --git a/.babelrc.js b/.babelrc.js
index 6fdc98a4e77c..51399697f4e5 100644
--- a/.babelrc.js
+++ b/.babelrc.js
@@ -1,15 +1,12 @@
module.exports = {
presets: [
[
- '@babel/env',
+ '@babel/preset-env',
{
loose: true,
- modules: false,
- exclude: ['transform-typeof-symbol']
+ bugfixes: true,
+ modules: false
}
]
- ],
- plugins: [
- '@babel/plugin-proposal-object-rest-spread'
]
};
diff --git a/.browserslistrc b/.browserslistrc
index 66df8f4f839c..cddd23005246 100644
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -1,13 +1,12 @@
# https://github.com/browserslist/browserslist#readme
->= 1%
-last 1 major version
+>= 0.5%
+last 2 major versions
not dead
Chrome >= 60
Firefox >= 60
-Edge >= 15.15063
-Explorer 11
-iOS >= 10
-Safari >= 10
-Android >= 6
-not ExplorerMobile <= 11
+Firefox ESR
+iOS >= 12
+Safari >= 12
+not Explorer <= 11
+not kaios <= 2.5 # fix floating label issues in Firefox (see https://github.com/postcss/autoprefixer/issues/1533)
diff --git a/bundlesize.config.json b/.bundlewatch.config.json
similarity index 67%
rename from bundlesize.config.json
rename to .bundlewatch.config.json
index eda41a22d17a..6f680664ca67 100644
--- a/bundlesize.config.json
+++ b/.bundlewatch.config.json
@@ -6,55 +6,61 @@
},
{
"path": "./dist/css/bootstrap-grid.min.css",
- "maxSize": "6 kB"
+ "maxSize": "6.0 kB"
},
{
"path": "./dist/css/bootstrap-reboot.css",
- "maxSize": "2 kB"
+ "maxSize": "3.5 kB"
},
{
"path": "./dist/css/bootstrap-reboot.min.css",
- "maxSize": "2 kB"
+ "maxSize": "3.25 kB"
},
{
"path": "./dist/css/bootstrap-utilities.css",
- "maxSize": "8 kB"
+ "maxSize": "11.75 kB"
},
{
"path": "./dist/css/bootstrap-utilities.min.css",
- "maxSize": "7 kB"
+ "maxSize": "10.75 kB"
},
{
"path": "./dist/css/bootstrap.css",
- "maxSize": "25 kB"
+ "maxSize": "32.5 kB"
},
{
"path": "./dist/css/bootstrap.min.css",
- "maxSize": "23 kB"
+ "maxSize": "30.25 kB"
},
{
"path": "./dist/js/bootstrap.bundle.js",
- "maxSize": "51 kB"
+ "maxSize": "43.0 kB"
},
{
"path": "./dist/js/bootstrap.bundle.min.js",
- "maxSize": "24 kB"
+ "maxSize": "23.5 kB"
},
{
"path": "./dist/js/bootstrap.esm.js",
- "maxSize": "28 kB"
+ "maxSize": "28.0 kB"
},
{
"path": "./dist/js/bootstrap.esm.min.js",
- "maxSize": "19 kB"
+ "maxSize": "18.25 kB"
},
{
"path": "./dist/js/bootstrap.js",
- "maxSize": "29 kB"
+ "maxSize": "28.75 kB"
},
{
"path": "./dist/js/bootstrap.min.js",
- "maxSize": "17.5 kB"
+ "maxSize": "16.25 kB"
}
- ]
+ ],
+ "ci": {
+ "trackBranches": [
+ "main",
+ "v4-dev"
+ ]
+ }
}
diff --git a/.cspell.json b/.cspell.json
new file mode 100644
index 000000000000..d2434c30a608
--- /dev/null
+++ b/.cspell.json
@@ -0,0 +1,131 @@
+{
+ "version": "0.2",
+ "words": [
+ "affordance",
+ "allowfullscreen",
+ "Analyser",
+ "autohide",
+ "autohiding",
+ "autoplay",
+ "autoplays",
+ "autoplaying",
+ "blazingly",
+ "Blockquotes",
+ "Bootstrappers",
+ "borderless",
+ "Brotli",
+ "browserslist",
+ "browserslistrc",
+ "btncheck",
+ "btnradio",
+ "callout",
+ "callouts",
+ "camelCase",
+ "clearfix",
+ "Codesniffer",
+ "combinator",
+ "Contentful",
+ "Cpath",
+ "Crossfade",
+ "crossfading",
+ "cssgrid",
+ "Csvg",
+ "Datalists",
+ "Deque",
+ "discoverability",
+ "docsearch",
+ "docsref",
+ "dropend",
+ "dropleft",
+ "dropright",
+ "dropstart",
+ "dropup",
+ "dgst",
+ "errorf",
+ "favicon",
+ "favicons",
+ "fieldsets",
+ "flexbox",
+ "fullscreen",
+ "getbootstrap",
+ "Grayscale",
+ "Hoverable",
+ "hreflang",
+ "hstack",
+ "importmap",
+ "jsdelivr",
+ "Jumpstart",
+ "keyframes",
+ "libera",
+ "libman",
+ "Libsass",
+ "lightboxes",
+ "Lowercased",
+ "markdownify",
+ "mediaqueries",
+ "minifiers",
+ "misfunction",
+ "mkdir",
+ "monospace",
+ "mouseleave",
+ "navbars",
+ "navs",
+ "Neue",
+ "noindex",
+ "Noto",
+ "offcanvas",
+ "offcanvases",
+ "Packagist",
+ "popperjs",
+ "prebuild",
+ "prefersreducedmotion",
+ "prepended",
+ "printf",
+ "rects",
+ "relref",
+ "rgba",
+ "roboto",
+ "RTLCSS",
+ "ruleset",
+ "sassrc",
+ "screenreaders",
+ "scrollbars",
+ "scrollspy",
+ "Segoe",
+ "semibold",
+ "socio",
+ "srcset",
+ "stackblitz",
+ "stickied",
+ "Stylelint",
+ "subnav",
+ "tabbable",
+ "textareas",
+ "toggleable",
+ "topbar",
+ "touchend",
+ "twbs",
+ "unitless",
+ "unstylable",
+ "unstyled",
+ "Uppercased",
+ "urlize",
+ "urlquery",
+ "vbtn",
+ "viewports",
+ "Vite",
+ "vstack",
+ "walkthroughs",
+ "WCAG",
+ "zindex"
+ ],
+ "language": "en-US",
+ "ignorePaths": [
+ ".cspell.json",
+ "dist/",
+ "*.min.*",
+ "**/*rtl*",
+ "**/tests/**"
+ ],
+ "useGitignore": true
+}
diff --git a/.dependabot/config.yml b/.dependabot/config.yml
deleted file mode 100644
index 8451f8185f29..000000000000
--- a/.dependabot/config.yml
+++ /dev/null
@@ -1,20 +0,0 @@
-# https://dependabot.com/docs/config-file/
-version: 1
-update_configs:
- # Keep package.json (& lockfiles) up to date as soon as
- # new versions are published to the npm registry
- - package_manager: "javascript"
- directory: "/"
- update_schedule: "weekly"
- # Apply default reviewer and label to created pull requests
- default_reviewers:
- - "Johann-S"
- - "XhmikosR"
- default_labels:
- - "dependencies"
- - "v5"
- version_requirement_updates: "increase_versions"
- ignored_updates:
- - match:
- dependency_name: "karma-browserstack-launcher"
- version_requirement: "1.5.1"
diff --git a/.eslintignore b/.eslintignore
index 6d874bc3658d..e42161487a5b 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,7 +1,9 @@
**/*.min.js
**/dist/
**/vendor/
-/_gh_pages/
+/_site/
+/site/public/
/js/coverage/
/site/static/sw.js
-/package.js
+/site/static/docs/**/assets/sw.js
+/site/layouts/partials/
diff --git a/.eslintrc.json b/.eslintrc.json
index 422546a5809e..017a6d13f80e 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,15 +1,48 @@
{
"root": true,
- "parser": "babel-eslint",
"extends": [
"plugin:import/errors",
"plugin:import/warnings",
"plugin:unicorn/recommended",
- "xo/esnext",
+ "xo",
"xo/browser"
],
"rules": {
+ "arrow-body-style": "off",
"capitalized-comments": "off",
+ "comma-dangle": [
+ "error",
+ "never"
+ ],
+ "import/extensions": [
+ "error",
+ "ignorePackages",
+ {
+ "js": "always"
+ }
+ ],
+ "import/first": "error",
+ "import/newline-after-import": "error",
+ "import/no-absolute-path": "error",
+ "import/no-amd": "error",
+ "import/no-cycle": [
+ "error",
+ {
+ "ignoreExternal": true
+ }
+ ],
+ "import/no-duplicates": "error",
+ "import/no-extraneous-dependencies": "error",
+ "import/no-mutable-exports": "error",
+ "import/no-named-as-default": "error",
+ "import/no-named-as-default-member": "error",
+ "import/no-named-default": "error",
+ "import/no-self-import": "error",
+ "import/no-unassigned-import": [
+ "error"
+ ],
+ "import/no-useless-path-segments": "error",
+ "import/order": "error",
"indent": [
"error",
2,
@@ -18,6 +51,7 @@
"SwitchCase": 1
}
],
+ "logical-assignment-operators": "off",
"max-params": [
"warn",
5
@@ -26,27 +60,181 @@
"error",
"always-multiline"
],
- "new-cap": "off",
+ "new-cap": [
+ "error",
+ {
+ "properties": false
+ }
+ ],
"no-console": "error",
+ "no-negated-condition": "off",
"object-curly-spacing": [
"error",
"always"
],
+ "operator-linebreak": [
+ "error",
+ "after"
+ ],
+ "prefer-object-has-own": "off",
+ "prefer-template": "error",
"semi": [
"error",
"never"
],
- "unicorn/consistent-function-scoping": "off",
+ "strict": "error",
"unicorn/explicit-length-check": "off",
- "unicorn/import-index": "off",
- "unicorn/no-for-loop": "off",
+ "unicorn/filename-case": "off",
+ "unicorn/no-anonymous-default-export": "off",
+ "unicorn/no-array-callback-reference": "off",
+ "unicorn/no-array-method-this-argument": "off",
+ "unicorn/no-null": "off",
+ "unicorn/no-typeof-undefined": "off",
"unicorn/no-unused-properties": "error",
- "unicorn/prefer-dataset": "off",
- "unicorn/prefer-includes": "off",
- "unicorn/prefer-node-append": "off",
- "unicorn/prefer-node-remove": "off",
+ "unicorn/numeric-separators-style": "off",
+ "unicorn/prefer-array-flat": "off",
+ "unicorn/prefer-at": "off",
+ "unicorn/prefer-dom-node-dataset": "off",
+ "unicorn/prefer-module": "off",
"unicorn/prefer-query-selector": "off",
- "unicorn/prefer-text-content": "off",
+ "unicorn/prefer-spread": "off",
+ "unicorn/prefer-string-raw": "off",
+ "unicorn/prefer-string-replace-all": "off",
+ "unicorn/prefer-structured-clone": "off",
"unicorn/prevent-abbreviations": "off"
- }
+ },
+ "overrides": [
+ {
+ "files": [
+ "build/**"
+ ],
+ "env": {
+ "browser": false,
+ "node": true
+ },
+ "parserOptions": {
+ "sourceType": "module"
+ },
+ "rules": {
+ "no-console": "off",
+ "unicorn/prefer-top-level-await": "off"
+ }
+ },
+ {
+ "files": [
+ "js/**"
+ ],
+ "parserOptions": {
+ "sourceType": "module"
+ }
+ },
+ {
+ "files": [
+ "js/tests/*.js",
+ "js/tests/integration/rollup*.js"
+ ],
+ "env": {
+ "node": true
+ },
+ "parserOptions": {
+ "sourceType": "script"
+ }
+ },
+ {
+ "files": [
+ "js/tests/unit/**"
+ ],
+ "env": {
+ "jasmine": true
+ },
+ "rules": {
+ "no-console": "off",
+ "unicorn/consistent-function-scoping": "off",
+ "unicorn/no-useless-undefined": "off",
+ "unicorn/prefer-add-event-listener": "off"
+ }
+ },
+ {
+ "files": [
+ "js/tests/visual/**"
+ ],
+ "plugins": [
+ "html"
+ ],
+ "settings": {
+ "html/html-extensions": [
+ ".html"
+ ]
+ },
+ "rules": {
+ "no-console": "off",
+ "no-new": "off",
+ "unicorn/no-array-for-each": "off"
+ }
+ },
+ {
+ "files": [
+ "scss/tests/**"
+ ],
+ "env": {
+ "node": true
+ },
+ "parserOptions": {
+ "sourceType": "script"
+ }
+ },
+ {
+ "files": [
+ "site/**"
+ ],
+ "env": {
+ "browser": true,
+ "node": false
+ },
+ "parserOptions": {
+ "sourceType": "script",
+ "ecmaVersion": 2019
+ },
+ "rules": {
+ "no-new": "off",
+ "unicorn/no-array-for-each": "off"
+ }
+ },
+ {
+ "files": [
+ "site/src/assets/application.js",
+ "site/src/assets/partials/*.js",
+ "site/src/assets/search.js",
+ "site/src/assets/snippets.js",
+ "site/src/assets/stackblitz.js",
+ "site/src/plugins/*.js"
+ ],
+ "parserOptions": {
+ "sourceType": "module",
+ "ecmaVersion": 2020
+ }
+ },
+ {
+ "files": [
+ "**/*.md"
+ ],
+ "plugins": [
+ "markdown"
+ ],
+ "processor": "markdown/markdown"
+ },
+ {
+ "files": [
+ "**/*.md/*.js",
+ "**/*.md/*.mjs"
+ ],
+ "extends": "plugin:markdown/recommended-legacy",
+ "parserOptions": {
+ "sourceType": "module"
+ },
+ "rules": {
+ "unicorn/prefer-node-protocol": "off"
+ }
+ }
+ ]
}
diff --git a/.gitattributes b/.gitattributes
index 39813c758947..40b1c37421a0 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,18 +1,8 @@
# Enforce Unix newlines
-*.css text eol=lf
-*.html text eol=lf
-*.js text eol=lf
-*.json text eol=lf
-*.md text eol=lf
-*.rb text eol=lf
-*.scss text eol=lf
-*.svg text eol=lf
-*.txt text eol=lf
-*.xml text eol=lf
-*.yml text eol=lf
+* text=auto eol=lf
# Don't diff or textually merge source maps
-*.map binary
+*.map binary
bootstrap.css linguist-vendored=false
bootstrap.js linguist-vendored=false
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index 82a84350b51c..a37b01210b5c 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -1,6 +1,6 @@
# Contributing to Bootstrap
-Looking to contribute something to Bootstrap? **Here's how you can help.**
+Looking to contribute something to Bootstrap? **Here’s how you can help.**
Please take a moment to review this document in order to make the contribution
process easy and effective for everyone involved.
@@ -18,24 +18,29 @@ the preferred channel for [bug reports](#bug-reports), [features requests](#feat
and [submitting pull requests](#pull-requests), but please respect the following
restrictions:
-* Please **do not** use the issue tracker for personal support requests. Stack
- Overflow ([`bootstrap-4`](https://stackoverflow.com/questions/tagged/bootstrap-4) tag),
- [Slack](https://bootstrap-slack.herokuapp.com/) or [IRC](README.md#community) are better places to get help.
+- Please **do not** use the issue tracker for personal support requests. Stack Overflow ([`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5) tag), [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions) or [IRC](/README.md#community) are better places to get help.
-* Please **do not** derail or troll issues. Keep the discussion on topic and
+- Please **do not** derail or troll issues. Keep the discussion on topic and
respect the opinions of others.
-* Please **do not** post comments consisting solely of "+1" or ":thumbsup:".
+- Please **do not** post comments consisting solely of "+1" or ":thumbsup:".
Use [GitHub's "reactions" feature](https://blog.github.com/2016-03-10-add-reactions-to-pull-requests-issues-and-comments/)
instead. We reserve the right to delete comments which violate this rule.
-* Please **do not** open issues regarding the official themes offered on .
+- Please **do not** open issues regarding the official themes offered on .
Instead, please email any questions or feedback regarding those themes to `themes AT getbootstrap DOT com`.
+## Issues assignment
+
+The core team will be looking at the open issues, analyze them, and provide guidance on how to proceed. **Issues won’t be assigned to anyone outside the core team.** However, contributors are welcome to participate in the discussion and provide their input on how to best solve the issue, and even submit a PR if they want to. Please wait that the issue is ready to be worked on before submitting a PR, we don’t want to waste your time.
+
+Please keep in mind that the core team is small, has limited resources and that we are not always able to respond immediately. We will try to provide feedback as soon as possible, but please be patient. If you don’t get a response immediately, it doesn’t mean that we are ignoring you or that we don’t care about your issue or PR. We will get back to you as soon as we can.
+
+
## Issues and labels
-Our bug tracker utilizes several labels to help organize and identify issues. Here's what they represent and how we use them:
+Our bug tracker utilizes several labels to help organize and identify issues. Here’s what they represent and how we use them:
- `browser bug` - Issues that are reported to us, but actually are the result of a browser-specific bug. These are diagnosed with reduced test cases and result in an issue opened on that browser's own bug tracker.
- `confirmed` - Issues that have been confirmed with a reduced test case and identify a bug in Bootstrap.
@@ -58,21 +63,21 @@ Good bug reports are extremely helpful, so thanks!
Guidelines for bug reports:
-0. **[validate your HTML](https://html5.validator.nu/)** to ensure your
- problem isn't caused by a simple error in your own code.
+0. **[Validate your HTML](https://html5.validator.nu/)** to ensure your
+ problem isn’t caused by a simple error in your own code.
1. **Use the GitHub issue search** — check if the issue has already been
reported.
2. **Check if the issue has been fixed** — try to reproduce it using the
- latest `master` or development branch in the repository.
+ latest `main` (or `v4-dev` branch if the issue is about v4) in the repository.
3. **Isolate the problem** — ideally create a [reduced test
case](https://css-tricks.com/reduced-test-cases/) and a live example.
- [This JS Bin](https://jsbin.com/lolome/edit?html,output) is a helpful template.
+ These [v4 CodePen](https://codepen.io/team/bootstrap/pen/yLabNQL) and [v5 CodePen](https://codepen.io/team/bootstrap/pen/qBamdLj) are helpful templates.
-A good bug report shouldn't leave others needing to chase you up for more
+A good bug report shouldn’t leave others needing to chase you up for more
information. Please try to be as detailed as possible in your report. What is
your environment? What steps will reproduce the issue? What browser(s) and OS
experience the problem? Do other browsers show the bug differently? What
@@ -101,19 +106,19 @@ Example:
Sometimes bugs reported to us are actually caused by bugs in the browser(s) themselves, not bugs in Bootstrap per se.
-| Vendor(s) | Browser(s) | Rendering engine | Bug reporting website(s) | Notes |
-| ------------- | ---------------------------- | ---------------- | ------------------------------------------------------------------------------------- | -------------------------------------------------------- |
-| Mozilla | Firefox | Gecko | https://bugzilla.mozilla.org/enter_bug.cgi | "Core" is normally the right product option to choose. |
-| Apple | Safari | WebKit | https://bugs.webkit.org/enter_bug.cgi?product=WebKit https://bugreport.apple.com/ | In Apple's bug reporter, choose "Safari" as the product. |
-| Google, Opera | Chrome, Chromium, Opera v15+ | Blink | https://bugs.chromium.org/p/chromium/issues/list | Click the "New issue" button. |
-| Microsoft | Edge | EdgeHTML | https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/ | |
+| Vendor(s) | Browser(s) | Rendering engine | Bug reporting website(s) | Notes |
+| ------------- | ---------------------------- | ---------------- | ------------------------------------------------------ | -------------------------------------------------------- |
+| Mozilla | Firefox | Gecko | | "Core" is normally the right product option to choose. |
+| Apple | Safari | WebKit | | In Apple’s bug reporter, choose "Safari" as the product. |
+| Google, Opera | Chrome, Chromium, Opera v15+ | Blink | | Click the "New issue" button. |
+| Microsoft | Edge | Blink | | Go to "Help > Send Feedback" from the browser |
## Feature requests
Feature requests are welcome. But take a moment to find out whether your idea
-fits with the scope and aims of the project. It's up to *you* to make a strong
-case to convince the project's developers of the merits of this feature. Please
+fits with the scope and aims of the project. It’s up to _you_ to make a strong
+case to convince the project’s developers of the merits of this feature. Please
provide as much detail and context as possible.
@@ -123,23 +128,25 @@ Good pull requests—patches, improvements, new features—are a fantastic
help. They should remain focused in scope and avoid containing unrelated
commits.
-**Please ask first** before embarking on any significant pull request (e.g.
+**Please ask first** before embarking on any **significant** pull request (e.g.
implementing features, refactoring code, porting to a different language),
otherwise you risk spending a lot of time working on something that the
-project's developers might not want to merge into the project.
+project’s developers might not want to merge into the project. For trivial
+things, or things that don’t require a lot of your time, you can go ahead and
+make a PR.
Please adhere to the [coding guidelines](#code-guidelines) used throughout the
project (indentation, accurate comments, etc.) and any other requirements
(such as test coverage).
-**Do not edit `bootstrap.css`, or `bootstrap.js`
-directly!** Those files are automatically generated. You should edit the
-source files in [`/bootstrap/scss/`](https://github.com/twbs/bootstrap/tree/master/scss)
-and/or [`/bootstrap/js/src/`](https://github.com/twbs/bootstrap/tree/master/js/src) instead.
+**Do not edit `bootstrap.css` or `bootstrap.js`, and do not commit
+any dist files (`dist/` or `js/dist`).** Those files are automatically generated by our build tools. You should
+edit the source files in [`/bootstrap/scss/`](https://github.com/twbs/bootstrap/tree/main/scss)
+and/or [`/bootstrap/js/src/`](https://github.com/twbs/bootstrap/tree/main/js/src) instead.
-Similarly, when contributing to Bootstrap's documentation, you should edit the
+Similarly, when contributing to Bootstrap’s documentation, you should edit the
documentation source files in
-[the `/bootstrap/site/content/docs/` directory of the `master` branch](https://github.com/twbs/bootstrap/tree/master/site/content/docs).
+[the `/bootstrap/site/content/docs/` directory of the `main` branch](https://github.com/twbs/bootstrap/tree/main/site/content/docs).
**Do not edit the `gh-pages` branch.** That branch is generated from the
documentation source files and is managed separately by the Bootstrap Core Team.
@@ -161,37 +168,51 @@ included in the project:
2. If you cloned a while ago, get the latest changes from upstream:
```bash
- git checkout master
- git pull upstream master
+ git checkout main
+ git pull upstream main
+ ```
+
+3. Install or update project dependencies with npm:
+
+ ```bash
+ npm install
```
-3. Create a new topic branch (off the main project development branch) to
+4. Create a new topic branch (off the main project development branch) to
contain your feature, change, or fix:
```bash
git checkout -b
```
-4. Commit your changes in logical chunks. Please adhere to these [git commit
+5. Commit your changes in logical chunks. Please adhere to these [git commit
message guidelines](https://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
- or your code is unlikely be merged into the main project. Use Git's
+ or your code is unlikely be merged into the main project. Use Git’s
[interactive rebase](https://help.github.com/articles/about-git-rebase/)
feature to tidy up your commits before making them public.
-5. Locally merge (or rebase) the upstream development branch into your topic branch:
+6. Ensure your changes compile the dist CSS and JS files in the `dist/` directory. Verify
+ the build succeeds locally without errors.
+
+ ```bash
+ npm run dist
+ ```
+
+7. Locally merge (or rebase) the upstream development branch into your topic branch:
```bash
- git pull [--rebase] upstream master
+ git pull [--rebase] upstream main
```
-6. Push your topic branch up to your fork:
+8. Commit your changes, but **do not push compiled CSS and JS files in `dist` and `js/dist`**.
+ Push your topic branch up to your fork:
```bash
git push origin
```
-7. [Open a Pull Request](https://help.github.com/articles/about-pull-requests/)
- with a clear title and description against the `master` branch.
+9. [Open a pull request](https://help.github.com/articles/about-pull-requests/)
+ with a clear title and description against the `main` branch.
**IMPORTANT**: By submitting a patch, you agree to allow the project owners to
license your work under the terms of the [MIT License](../LICENSE) (if it
@@ -207,15 +228,15 @@ includes code changes) and under the terms of the
[Adhere to the Code Guide.](https://codeguide.co/#html)
- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags).
-- Use CDNs and HTTPS for third-party JS when possible. We don't use protocol-relative URLs in this case because they break when viewing the page locally via `file://`.
+- Use CDNs and HTTPS for third-party JS when possible. We don’t use protocol-relative URLs in this case because they break when viewing the page locally via `file://`.
- Use [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes in documentation examples to promote accessibility.
### CSS
[Adhere to the Code Guide.](https://codeguide.co/#css)
-- When feasible, default color palettes should comply with [WCAG color contrast guidelines](https://www.w3.org/TR/WCAG20/#visual-audio-contrast).
-- Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](https://a11yproject.com/posts/never-remove-css-outlines/) for more details.
+- When feasible, default color palettes should comply with [WCAG color contrast guidelines](https://www.w3.org/TR/WCAG/#distinguishable).
+- Except in rare cases, don’t remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](https://www.a11yproject.com/posts/2013-01-25-never-remove-css-outlines/) for more details.
### JS
@@ -234,4 +255,4 @@ Run `npm run test` before committing to ensure your changes follow our coding st
By contributing your code, you agree to license your contribution under the [MIT License](../LICENSE).
By contributing to the documentation, you agree to license your contribution under the [Creative Commons Attribution 3.0 Unported License](https://creativecommons.org/licenses/by/3.0/).
-Prior to v3.1.0, Bootstrap's code was released under the Apache License v2.0.
+Prior to v3.1.0, Bootstrap’s code was released under the Apache License v2.0.
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
deleted file mode 100644
index 43ea984bab4f..000000000000
--- a/.github/FUNDING.yml
+++ /dev/null
@@ -1,3 +0,0 @@
-# These are supported funding model platforms
-
-open_collective: bootstrap
diff --git a/.github/ISSUE_TEMPLATE/bug.md b/.github/ISSUE_TEMPLATE/bug.md
deleted file mode 100644
index 8971d44adbcc..000000000000
--- a/.github/ISSUE_TEMPLATE/bug.md
+++ /dev/null
@@ -1,11 +0,0 @@
-Before opening:
-
-- [Search for duplicate or closed issues](https://github.com/twbs/bootstrap/issues?utf8=%E2%9C%93&q=is%3Aissue)
-- [Validate](https://html5.validator.nu/) and [lint](https://github.com/twbs/bootlint#in-the-browser) any HTML to avoid common problems
-- Read the [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/.github/CONTRIBUTING.md)
-
-Bug reports must include:
-
-- Operating system and version (Windows, macOS, Android, iOS, Win10 Mobile)
-- Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser)
-- [Reduced test case](https://css-tricks.com/reduced-test-cases/) and suggested fix using [CodePen](https://codepen.io/) or [JS Bin](https://jsbin.com/)
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
deleted file mode 100644
index 2d77bb50ef9e..000000000000
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-name: Bug report
-about: Tell us about a bug you may have identified in Bootstrap.
-
----
-
-Before opening:
-
-- [Search for duplicate or closed issues](https://github.com/twbs/bootstrap/issues?utf8=%E2%9C%93&q=is%3Aissue)
-- [Validate](https://html5.validator.nu/) and [lint](https://github.com/twbs/bootlint#in-the-browser) any HTML to avoid common problems
-- Read the [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/.github/CONTRIBUTING.md)
-
-Bug reports must include:
-
-- Operating system and version (Windows, macOS, Android, iOS, Win10 Mobile)
-- Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser)
-- [Reduced test case](https://css-tricks.com/reduced-test-cases/) and suggested fix using [CodePen](https://codepen.io/) or [JS Bin](https://jsbin.com/)
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
new file mode 100644
index 000000000000..3e3d6b9e55f7
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -0,0 +1,62 @@
+name: Report a bug
+description: Tell us about a bug or issue you may have identified in Bootstrap.
+title: "Provide a general summary of the issue"
+labels: [bug]
+assignees: "-"
+body:
+ - type: checkboxes
+ attributes:
+ label: Prerequisites
+ description: Take a couple minutes to help our maintainers work faster.
+ options:
+ - label: I have [searched](https://github.com/twbs/bootstrap/issues?utf8=%E2%9C%93&q=is%3Aissue) for duplicate or closed issues
+ required: true
+ - label: I have [validated](https://html5.validator.nu/) any HTML to avoid common problems
+ required: true
+ - label: I have read the [contributing guidelines](https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md)
+ required: true
+ - type: textarea
+ id: what-happened
+ attributes:
+ label: Describe the issue
+ description: Provide a summary of the issue and what you expected to happen, including specific steps to reproduce.
+ validations:
+ required: true
+ - type: textarea
+ id: reduced-test-case
+ attributes:
+ label: Reduced test cases
+ description: Include links [reduced test case](https://css-tricks.com/reduced-test-cases/) links or suggested fixes using CodePen ([v4 template](https://codepen.io/team/bootstrap/pen/yLabNQL) or [v5 template](https://codepen.io/team/bootstrap/pen/qBamdLj)).
+ validations:
+ required: true
+ - type: dropdown
+ id: os
+ attributes:
+ label: What operating system(s) are you seeing the problem on?
+ multiple: true
+ options:
+ - Windows
+ - macOS
+ - Android
+ - iOS
+ - Linux
+ validations:
+ required: true
+ - type: dropdown
+ id: browser
+ attributes:
+ label: What browser(s) are you seeing the problem on?
+ multiple: true
+ options:
+ - Chrome
+ - Safari
+ - Firefox
+ - Microsoft Edge
+ - Opera
+ - type: input
+ id: version
+ attributes:
+ label: What version of Bootstrap are you using?
+ placeholder: "e.g., v5.1.0 or v4.5.2"
+ validations:
+ required: true
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 000000000000..f1520711335c
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,4 @@
+contact_links:
+ - name: Ask the community
+ url: https://github.com/twbs/bootstrap/discussions/new
+ about: Ask and discuss questions with other Bootstrap community members.
diff --git a/.github/ISSUE_TEMPLATE/feature.md b/.github/ISSUE_TEMPLATE/feature.md
deleted file mode 100644
index 4c13c86a5cb6..000000000000
--- a/.github/ISSUE_TEMPLATE/feature.md
+++ /dev/null
@@ -1,9 +0,0 @@
-Before opening:
-
-- [Search for duplicate or closed issues](https://github.com/twbs/bootstrap/issues?utf8=%E2%9C%93&q=is%3Aissue)
-- Read the [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/.github/CONTRIBUTING.md)
-
-Feature requests must include:
-
-- As much detail as possible for what we should add and why it's important to Bootstrap
-- Relevant links to prior art, screenshots, or live demos whenever possible
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
deleted file mode 100644
index ed71d397dee5..000000000000
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for a new feature in Bootstrap.
-
----
-
-Before opening:
-
-- [Search for duplicate or closed issues](https://github.com/twbs/bootstrap/issues?utf8=%E2%9C%93&q=is%3Aissue)
-- Read the [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/.github/CONTRIBUTING.md)
-
-Feature requests must include:
-
-- As much detail as possible for what we should add and why it's important to Bootstrap
-- Relevant links to prior art, screenshots, or live demos whenever possible
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
new file mode 100644
index 000000000000..4b757b1d6753
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -0,0 +1,29 @@
+name: Feature request
+description: Suggest new or updated features to include in Bootstrap.
+title: "Suggest a new feature"
+labels: [feature]
+assignees: []
+body:
+ - type: checkboxes
+ attributes:
+ label: Prerequisites
+ description: Take a couple minutes to help our maintainers work faster.
+ options:
+ - label: I have [searched](https://github.com/twbs/bootstrap/issues?utf8=%E2%9C%93&q=is%3Aissue) for duplicate or closed feature requests
+ required: true
+ - label: I have read the [contributing guidelines](https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md)
+ required: true
+ - type: textarea
+ id: proposal
+ attributes:
+ label: Proposal
+ description: Provide detailed information for what we should add, including relevant links to prior art, screenshots, or live demos whenever possible.
+ validations:
+ required: true
+ - type: textarea
+ id: motivation
+ attributes:
+ label: Motivation and context
+ description: Tell us why this change is needed or helpful, and what problems it may help solve.
+ validations:
+ required: true
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 000000000000..04df74f36a56
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,38 @@
+### Description
+
+
+
+### Motivation & Context
+
+
+
+### Type of changes
+
+
+
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Refactoring (non-breaking change)
+- [ ] Breaking change (fix or feature that would change existing functionality)
+
+### Checklist
+
+
+
+
+- [ ] I have read the [contributing guidelines](https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md)
+- [ ] My code follows the code style of the project _(using `npm run lint`)_
+- [ ] My change introduces changes to the documentation
+- [ ] I have updated the documentation accordingly
+- [ ] I have added tests to cover my changes
+- [ ] All new and existing tests passed
+
+#### Live previews
+
+
+
+-
+
+### Related issues
+
+
diff --git a/.github/SUPPORT.md b/.github/SUPPORT.md
index de3c4b552e9a..26b3be42c5b5 100644
--- a/.github/SUPPORT.md
+++ b/.github/SUPPORT.md
@@ -6,6 +6,6 @@ See the [contributing guidelines](CONTRIBUTING.md) for sharing bug reports.
For general troubleshooting or help getting started:
-- Join [the official Slack room](https://bootstrap-slack.herokuapp.com/).
-- Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel.
-- Ask and explore Stack Overflow with the [`bootstrap-4`](https://stackoverflow.com/questions/tagged/bootstrap-4) tag.
+- Ask and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions).
+- Chat with fellow Bootstrappers in IRC. On the `irc.libera.chat` server, in the `#bootstrap` channel.
+- Ask and explore Stack Overflow with the [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5) tag.
diff --git a/.github/codeql/codeql-config.yml b/.github/codeql/codeql-config.yml
new file mode 100644
index 000000000000..957877282f68
--- /dev/null
+++ b/.github/codeql/codeql-config.yml
@@ -0,0 +1,3 @@
+name: "CodeQL config"
+paths-ignore:
+ - dist
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
new file mode 100644
index 000000000000..77d364498f50
--- /dev/null
+++ b/.github/dependabot.yml
@@ -0,0 +1,26 @@
+version: 2
+updates:
+ - package-ecosystem: "github-actions"
+ directory: "/"
+ schedule:
+ interval: weekly
+ day: tuesday
+ time: "12:00"
+ timezone: Europe/Athens
+ - package-ecosystem: npm
+ directory: "/"
+ labels:
+ - dependencies
+ - v5
+ schedule:
+ interval: weekly
+ day: tuesday
+ time: "12:00"
+ timezone: Europe/Athens
+ versioning-strategy: increase
+ rebase-strategy: disabled
+ groups:
+ production-dependencies:
+ dependency-type: "production"
+ development-dependencies:
+ dependency-type: "development"
diff --git a/.github/release-drafter.yml b/.github/release-drafter.yml
new file mode 100644
index 000000000000..0289984bec06
--- /dev/null
+++ b/.github/release-drafter.yml
@@ -0,0 +1,60 @@
+name-template: 'v$NEXT_MAJOR_VERSION'
+tag-template: 'v$NEXT_MAJOR_VERSION'
+prerelease: true
+exclude-labels:
+ - 'skip-changelog'
+categories:
+ - title: '❗ Breaking Changes'
+ labels:
+ - 'breaking-change'
+ - title: '🚀 Highlights'
+ labels:
+ - 'release-highlight'
+ - title: '🚀 Features'
+ labels:
+ - 'new-feature'
+ - 'feature'
+ - 'enhancement'
+ - title: '🐛 Bug fixes'
+ labels:
+ - 'fix'
+ - 'bugfix'
+ - 'bug'
+ - title: '⚡ Performance improvements'
+ labels:
+ - 'performance'
+ - title: '🎨 CSS'
+ labels:
+ - 'css'
+ - title: '☕️ JavaScript'
+ labels:
+ - 'js'
+ - title: '📖 Docs'
+ labels:
+ - 'docs'
+ - title: '🛠 Examples'
+ labels:
+ - 'examples'
+ - title: '🌎 Accessibility'
+ labels:
+ - 'accessibility'
+ - title: '🔧 Utility API'
+ labels:
+ - 'utility API'
+ - 'utilities'
+ - title: '🏭 Tests'
+ labels:
+ - 'tests'
+ - title: '🧰 Misc'
+ labels:
+ - 'build'
+ - 'meta'
+ - 'chore'
+ - 'CI'
+ - title: '📦 Dependencies'
+ labels:
+ - 'dependencies'
+change-template: '- #$NUMBER: $TITLE'
+template: |
+ ## Changes
+ $CHANGES
diff --git a/.github/workflows/browserstack.yml b/.github/workflows/browserstack.yml
new file mode 100644
index 000000000000..a53c233cc671
--- /dev/null
+++ b/.github/workflows/browserstack.yml
@@ -0,0 +1,46 @@
+name: BrowserStack
+
+on:
+ push:
+ branches:
+ - "**"
+ - "!dependabot/**"
+ workflow_dispatch:
+
+env:
+ FORCE_COLOR: 2
+ NODE: 20
+
+permissions:
+ contents: read
+
+jobs:
+ browserstack:
+ runs-on: ubuntu-latest
+ if: github.repository == 'twbs/bootstrap'
+ timeout-minutes: 30
+
+ steps:
+ - name: Clone repository
+ uses: actions/checkout@v4
+ with:
+ persist-credentials: false
+
+ - name: Set up Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: "${{ env.NODE }}"
+ cache: npm
+
+ - name: Install npm dependencies
+ run: npm ci
+
+ - name: Run dist
+ run: npm run dist
+
+ - name: Run BrowserStack tests
+ run: npm run js-test-cloud
+ env:
+ BROWSER_STACK_ACCESS_KEY: "${{ secrets.BROWSER_STACK_ACCESS_KEY }}"
+ BROWSER_STACK_USERNAME: "${{ secrets.BROWSER_STACK_USERNAME }}"
+ GITHUB_SHA: "${{ github.sha }}"
diff --git a/.github/workflows/bundlewatch.yml b/.github/workflows/bundlewatch.yml
new file mode 100644
index 000000000000..99ba06063414
--- /dev/null
+++ b/.github/workflows/bundlewatch.yml
@@ -0,0 +1,43 @@
+name: Bundlewatch
+
+on:
+ push:
+ branches:
+ - main
+ pull_request:
+ workflow_dispatch:
+
+env:
+ FORCE_COLOR: 2
+ NODE: 20
+
+permissions:
+ contents: read
+
+jobs:
+ bundlewatch:
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Clone repository
+ uses: actions/checkout@v4
+ with:
+ persist-credentials: false
+
+ - name: Set up Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: "${{ env.NODE }}"
+ cache: npm
+
+ - name: Install npm dependencies
+ run: npm ci
+
+ - name: Run dist
+ run: npm run dist
+
+ - name: Run bundlewatch
+ run: npm run bundlewatch
+ env:
+ BUNDLEWATCH_GITHUB_TOKEN: "${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}"
+ CI_BRANCH_BASE: main
diff --git a/.github/workflows/calibreapp-image-actions.yml b/.github/workflows/calibreapp-image-actions.yml
new file mode 100644
index 000000000000..08987b3aae69
--- /dev/null
+++ b/.github/workflows/calibreapp-image-actions.yml
@@ -0,0 +1,32 @@
+name: Compress Images
+
+on:
+ pull_request:
+ paths:
+ - '**.jpg'
+ - '**.jpeg'
+ - '**.png'
+ - '**.webp'
+
+permissions:
+ contents: read
+
+jobs:
+ build:
+ # Only run on Pull Requests within the same repository, and not from forks.
+ if: github.event.pull_request.head.repo.full_name == github.repository
+ name: calibreapp/image-actions
+ runs-on: ubuntu-latest
+ permissions:
+ # allow calibreapp/image-actions to update PRs
+ pull-requests: write
+ steps:
+ - name: Clone repository
+ uses: actions/checkout@v4
+ with:
+ persist-credentials: false
+
+ - name: Compress Images
+ uses: calibreapp/image-actions@1.1.0
+ with:
+ githubToken: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
new file mode 100644
index 000000000000..dd7f6e7ef8d5
--- /dev/null
+++ b/.github/workflows/codeql.yml
@@ -0,0 +1,44 @@
+name: "CodeQL"
+
+on:
+ push:
+ branches:
+ - main
+ - v4-dev
+ - "!dependabot/**"
+ pull_request:
+ branches:
+ - main
+ - v4-dev
+ - "!dependabot/**"
+ schedule:
+ - cron: "0 2 * * 4"
+ workflow_dispatch:
+
+jobs:
+ analyze:
+ name: Analyze
+ runs-on: ubuntu-latest
+ permissions:
+ security-events: write
+
+ steps:
+ - name: Checkout repository
+ uses: actions/checkout@v4
+ with:
+ persist-credentials: false
+
+ - name: Initialize CodeQL
+ uses: github/codeql-action/init@v3
+ with:
+ config-file: ./.github/codeql/codeql-config.yml
+ languages: "javascript"
+ queries: +security-and-quality
+
+ - name: Autobuild
+ uses: github/codeql-action/autobuild@v3
+
+ - name: Perform CodeQL Analysis
+ uses: github/codeql-action/analyze@v3
+ with:
+ category: "/language:javascript"
diff --git a/.github/workflows/cspell.yml b/.github/workflows/cspell.yml
new file mode 100644
index 000000000000..8708673b131c
--- /dev/null
+++ b/.github/workflows/cspell.yml
@@ -0,0 +1,36 @@
+name: cspell
+
+on:
+ push:
+ branches:
+ - main
+ pull_request:
+ workflow_dispatch:
+
+env:
+ FORCE_COLOR: 2
+
+permissions:
+ contents: read
+
+jobs:
+ cspell:
+ permissions:
+ # allow streetsidesoftware/cspell-action to fetch files for commits and PRs
+ contents: read
+ pull-requests: read
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Clone repository
+ uses: actions/checkout@v4
+ with:
+ persist-credentials: false
+
+ - name: Run cspell
+ uses: streetsidesoftware/cspell-action@v6
+ with:
+ config: ".cspell.json"
+ files: "**/*.{md,mdx}"
+ inline: error
+ incremental_files_only: false
diff --git a/.github/workflows/css.yml b/.github/workflows/css.yml
new file mode 100644
index 000000000000..52e93e2b2354
--- /dev/null
+++ b/.github/workflows/css.yml
@@ -0,0 +1,40 @@
+name: CSS
+
+on:
+ push:
+ branches:
+ - main
+ pull_request:
+ workflow_dispatch:
+
+env:
+ FORCE_COLOR: 2
+ NODE: 20
+
+permissions:
+ contents: read
+
+jobs:
+ css:
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Clone repository
+ uses: actions/checkout@v4
+ with:
+ persist-credentials: false
+
+ - name: Set up Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: "${{ env.NODE }}"
+ cache: npm
+
+ - name: Install npm dependencies
+ run: npm ci
+
+ - name: Build CSS
+ run: npm run css
+
+ - name: Run CSS tests
+ run: npm run css-test
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
new file mode 100644
index 000000000000..082220563791
--- /dev/null
+++ b/.github/workflows/docs.yml
@@ -0,0 +1,50 @@
+name: Docs
+
+on:
+ push:
+ branches:
+ - main
+ pull_request:
+ workflow_dispatch:
+
+env:
+ FORCE_COLOR: 2
+ NODE: 20
+
+permissions:
+ contents: read
+
+jobs:
+ docs:
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Clone repository
+ uses: actions/checkout@v4
+ with:
+ persist-credentials: false
+
+ - name: Set up Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: "${{ env.NODE }}"
+ cache: npm
+
+ - run: java -version
+
+ - name: Install npm dependencies
+ run: npm ci
+
+ - name: Build docs
+ run: npm run docs-build
+
+ - name: Validate HTML
+ run: npm run docs-vnu
+
+ - name: Run linkinator
+ uses: JustinBeckwith/linkinator-action@v1
+ with:
+ paths: _site
+ recurse: true
+ verbosity: error
+ skip: "^(?!http://localhost)"
diff --git a/.github/workflows/issue-close-require.yml b/.github/workflows/issue-close-require.yml
new file mode 100644
index 000000000000..b5000d8b4350
--- /dev/null
+++ b/.github/workflows/issue-close-require.yml
@@ -0,0 +1,26 @@
+name: Close Issue Awaiting Reply
+
+on:
+ schedule:
+ - cron: "0 0 * * *"
+
+permissions:
+ contents: read
+
+jobs:
+ issue-close-require:
+ permissions:
+ # allow actions-cool/issues-helper to update issues and PRs
+ issues: write
+ pull-requests: write
+ runs-on: ubuntu-latest
+ if: github.repository == 'twbs/bootstrap'
+ steps:
+ - name: awaiting reply
+ uses: actions-cool/issues-helper@v3
+ with:
+ actions: "close-issues"
+ labels: "awaiting-reply"
+ inactive-day: 14
+ body: |
+ As the issue was labeled with `awaiting-reply`, but there has been no response in 14 days, this issue will be closed. If you have any questions, you can comment/reply.
diff --git a/.github/workflows/issue-labeled.yml b/.github/workflows/issue-labeled.yml
new file mode 100644
index 000000000000..584879dd80cf
--- /dev/null
+++ b/.github/workflows/issue-labeled.yml
@@ -0,0 +1,26 @@
+name: Issue Labeled
+
+on:
+ issues:
+ types: [labeled]
+
+permissions:
+ contents: read
+
+jobs:
+ issue-labeled:
+ permissions:
+ # allow actions-cool/issues-helper to update issues and PRs
+ issues: write
+ pull-requests: write
+ if: github.repository == 'twbs/bootstrap'
+ runs-on: ubuntu-latest
+ steps:
+ - name: awaiting reply
+ if: github.event.label.name == 'needs-example'
+ uses: actions-cool/issues-helper@v3
+ with:
+ actions: "create-comment"
+ token: ${{ secrets.GITHUB_TOKEN }}
+ body: |
+ Hello @${{ github.event.issue.user.login }}. Bug reports must include a **live demo** of the issue. Per our [contributing guidelines](https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md), please create a reduced test case on [CodePen](https://codepen.io/) or [StackBlitz](https://stackblitz.com/) and report back with your link, Bootstrap version, and specific browser and Operating System details.
diff --git a/.github/workflows/js.yml b/.github/workflows/js.yml
new file mode 100644
index 000000000000..1b672aa3097f
--- /dev/null
+++ b/.github/workflows/js.yml
@@ -0,0 +1,52 @@
+name: JS Tests
+
+on:
+ push:
+ branches:
+ - main
+ pull_request:
+ workflow_dispatch:
+
+env:
+ FORCE_COLOR: 2
+ NODE: 20
+
+permissions:
+ contents: read
+
+jobs:
+ run:
+ permissions:
+ # allow coverallsapp/github-action to create new checks issues and fetch code
+ checks: write
+ contents: read
+ name: JS Tests
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Clone repository
+ uses: actions/checkout@v4
+ with:
+ persist-credentials: false
+
+ - name: Set up Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: ${{ env.NODE }}
+ cache: npm
+
+ - name: Install npm dependencies
+ run: npm ci
+
+ - name: Run dist
+ run: npm run js
+
+ - name: Run JS tests
+ run: npm run js-test
+
+ - name: Run Coveralls
+ uses: coverallsapp/github-action@v2
+ if: ${{ !github.event.repository.fork }}
+ with:
+ github-token: "${{ secrets.GITHUB_TOKEN }}"
+ path-to-lcov: "./js/coverage/lcov.info"
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
new file mode 100644
index 000000000000..213f9ec65909
--- /dev/null
+++ b/.github/workflows/lint.yml
@@ -0,0 +1,37 @@
+name: Lint
+
+on:
+ push:
+ branches:
+ - main
+ pull_request:
+ workflow_dispatch:
+
+env:
+ FORCE_COLOR: 2
+ NODE: 20
+
+permissions:
+ contents: read
+
+jobs:
+ lint:
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Clone repository
+ uses: actions/checkout@v4
+ with:
+ persist-credentials: false
+
+ - name: Set up Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: "${{ env.NODE }}"
+ cache: npm
+
+ - name: Install npm dependencies
+ run: npm ci
+
+ - name: Lint
+ run: npm run lint
diff --git a/.github/workflows/node-sass.yml b/.github/workflows/node-sass.yml
new file mode 100644
index 000000000000..493cc35fde98
--- /dev/null
+++ b/.github/workflows/node-sass.yml
@@ -0,0 +1,49 @@
+name: CSS (node-sass)
+
+on:
+ push:
+ branches:
+ - main
+ pull_request:
+ workflow_dispatch:
+
+env:
+ FORCE_COLOR: 2
+ NODE: 20
+
+permissions:
+ contents: read
+
+jobs:
+ css:
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Clone repository
+ uses: actions/checkout@v4
+ with:
+ persist-credentials: false
+
+ - name: Set up Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: "${{ env.NODE }}"
+
+ - name: Build CSS with node-sass
+ run: |
+ npx --package node-sass@latest node-sass --version
+ npx --package node-sass@latest node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/ -o dist-sass/css/
+ ls -Al dist-sass/css
+
+ - name: Check built CSS files for Sass variables
+ shell: bash
+ run: |
+ SASS_VARS_FOUND=$(find "dist-sass/css/" -type f -name "*.css" -print0 | xargs -0 --no-run-if-empty grep -F "\$" || true)
+ if [[ -z "$SASS_VARS_FOUND" ]]; then
+ echo "All good, no Sass variables found!"
+ exit 0
+ else
+ echo "Found $(echo "$SASS_VARS_FOUND" | wc -l | bc) Sass variables:"
+ echo "$SASS_VARS_FOUND"
+ exit 1
+ fi
diff --git a/.github/workflows/release-notes.yml b/.github/workflows/release-notes.yml
new file mode 100644
index 000000000000..813956af2033
--- /dev/null
+++ b/.github/workflows/release-notes.yml
@@ -0,0 +1,23 @@
+name: Release notes
+
+on:
+ push:
+ branches:
+ - main
+ workflow_dispatch:
+
+permissions:
+ contents: read
+
+jobs:
+ update_release_draft:
+ permissions:
+ # allow release-drafter/release-drafter to create GitHub releases and add labels to PRs
+ contents: write
+ pull-requests: write
+ runs-on: ubuntu-latest
+ if: github.repository == 'twbs/bootstrap'
+ steps:
+ - uses: release-drafter/release-drafter@v6
+ env:
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
deleted file mode 100644
index 96d74522ca20..000000000000
--- a/.github/workflows/test.yml
+++ /dev/null
@@ -1,55 +0,0 @@
-name: Tests
-on: [push, pull_request]
-env:
- CI: true
-
-jobs:
- run:
- name: Node ${{ matrix.node }}
- runs-on: ubuntu-latest
-
- strategy:
- fail-fast: false
- matrix:
- node: [10, 12]
-
- steps:
- - name: Clone repository
- uses: actions/checkout@v1
- with:
- fetch-depth: 3
-
- - name: Set Node.js version
- uses: actions/setup-node@v1
- with:
- node-version: ${{ matrix.node }}
-
- - run: node --version
- - run: npm --version
- - run: java -version
-
- - name: Install npm dependencies
- run: npm ci
-
- - name: Run tests
- run: npm test
-
- - name: Run bundlesize
- run: npm run bundlesize
- if: matrix.node == 10
- env:
- BUNDLESIZE_GITHUB_TOKEN: "${{ secrets.BUNDLESIZE_GITHUB_TOKEN }}"
-
- - name: Run BrowserStack tests
- run: npm run js-test-cloud
- if: matrix.node == 10 && github.repository == 'twbs/bootstrap' && github.event_name == 'push'
- env:
- BROWSER_STACK_ACCESS_KEY: "${{ secrets.BROWSER_STACK_ACCESS_KEY }}"
- BROWSER_STACK_USERNAME: "${{ secrets.BROWSER_STACK_USERNAME }}"
-
- - name: Run Coveralls
- run: npm run coveralls
- if: matrix.node == 10 && github.repository == 'twbs/bootstrap' && github.event_name == 'push'
- env:
- COVERALLS_REPO_TOKEN: "${{ secrets.COVERALLS_REPO_TOKEN }}"
- COVERALLS_GIT_BRANCH: "${{ github.ref }}"
diff --git a/.gitignore b/.gitignore
index dff85a65c0ef..bb95ca04070c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,16 +1,5 @@
# Ignore docs files
-/_gh_pages/
-# This is the old Jekyll docs dist folder;
-# keeping it here so that when we switch branches it doesn't show up
-/site/docs/**/dist/
-# Hugo resources folder
-/resources/
-
-# Ignore ruby/bundler files;
-# keeping them here so that when we switch branches they don't show up
-/.bundle/
-/vendor/
-/.ruby-version
+/_site/
# Numerous always-ignore extensions
*.diff
@@ -37,11 +26,21 @@
*.sublime-workspace
nbproject
Thumbs.db
+/.vscode/
+# Local Netlify folder
+.netlify
# Komodo
.komodotools
*.komodoproject
# Folders to ignore
+/dist-sass/
/js/coverage/
/node_modules/
+
+# Site
+/site/dist
+/site/node_modules
+/site/.astro
+/site/public
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000000..32442e87a0db
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,12 @@
+# Prettier is only used for the website
+
+site/.astro
+site/dist
+site/public
+site/src/assets
+site/src/scss
+site/src/pages/**/*.md
+site/src/pages/**/*.mdx
+site/src/content/**/*.mdx
+site/src/layouts/RedirectLayout.astro
+site/static
diff --git a/.stylelintignore b/.stylelintignore
index e42e88938400..b7013de7ef81 100644
--- a/.stylelintignore
+++ b/.stylelintignore
@@ -1,5 +1,6 @@
**/*.min.css
**/dist/
**/vendor/
-/_gh_pages/
+/_site/
+/site/public/
/js/coverage/
diff --git a/.stylelintrc b/.stylelintrc
deleted file mode 100644
index 80d0eb5f9700..000000000000
--- a/.stylelintrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
- "extends": [
- "stylelint-config-twbs-bootstrap/scss"
- ],
- "rules": {
- "property-blacklist": [
- "border-radius",
- "border-top-left-radius",
- "border-top-right-radius",
- "border-bottom-right-radius",
- "border-bottom-left-radius",
- "transition"
- ],
- "function-blacklist": ["calc"],
- 'scss/dollar-variable-default': [
- true,
- {
- 'ignore': 'local'
- }
- ]
- }
-}
diff --git a/.stylelintrc.json b/.stylelintrc.json
new file mode 100644
index 000000000000..589884aae7ab
--- /dev/null
+++ b/.stylelintrc.json
@@ -0,0 +1,60 @@
+{
+ "extends": [
+ "stylelint-config-twbs-bootstrap"
+ ],
+ "reportInvalidScopeDisables": true,
+ "reportNeedlessDisables": true,
+ "overrides": [
+ {
+ "files": "**/*.scss",
+ "rules": {
+ "declaration-property-value-disallowed-list": {
+ "border": "none",
+ "outline": "none"
+ },
+ "function-disallowed-list": [
+ "calc",
+ "lighten",
+ "darken"
+ ],
+ "property-disallowed-list": [
+ "border-radius",
+ "border-top-left-radius",
+ "border-top-right-radius",
+ "border-bottom-right-radius",
+ "border-bottom-left-radius",
+ "transition"
+ ],
+ "scss/dollar-variable-default": [
+ true,
+ {
+ "ignore": "local"
+ }
+ ],
+ "scss/selector-no-union-class-name": true
+ }
+ },
+ {
+ "files": "scss/**/*.{test,spec}.scss",
+ "rules": {
+ "scss/dollar-variable-default": null,
+ "declaration-no-important": null
+ }
+ },
+ {
+ "files": "site/**/*.scss",
+ "rules": {
+ "scss/dollar-variable-default": null
+ }
+ },
+ {
+ "files": "site/**/examples/**/*.css",
+ "rules": {
+ "comment-empty-line-before": null,
+ "property-no-vendor-prefix": null,
+ "selector-no-qualifying-type": null,
+ "value-no-vendor-prefix": null
+ }
+ }
+ ]
+}
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index 9d9922f25f4d..756298316059 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -2,45 +2,131 @@
## Our Pledge
-In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, caste, color, religion, or sexual
+identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
## Our Standards
-Examples of behavior that contributes to creating a positive environment include:
+Examples of behavior that contributes to a positive environment for our
+community include:
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
+ and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the overall
+ community
-Examples of unacceptable behavior by participants include:
+Examples of unacceptable behavior include:
-* The use of sexualized language or imagery and unwelcome sexual attention or advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a professional setting
+- The use of sexualized language or imagery, and sexual attention or advances of
+ any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others’ private information, such as a physical or email address,
+ without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+ professional setting
-## Our Responsibilities
+## Enforcement Responsibilities
-Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
-Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
## Scope
-This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
## Enforcement
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at mdo@getbootstrap.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+mdo@getbootstrap.com.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of
+actions.
-Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
## Attribution
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [https://www.contributor-covenant.org/version/1/4/code-of-conduct.html][version]
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.1, available at
+[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
+
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
+
+For answers to common questions about this code of conduct, see the FAQ at
+[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
+[https://www.contributor-covenant.org/translations][translations].
-[homepage]: https://www.contributor-covenant.org/
-[version]: https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+[homepage]: https://www.contributor-covenant.org
+[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
+[Mozilla CoC]: https://github.com/mozilla/diversity
+[FAQ]: https://www.contributor-covenant.org/faq
+[translations]: https://www.contributor-covenant.org/translations
diff --git a/LICENSE b/LICENSE
index 7d1e2311f44f..fa7c00bc4ebd 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,7 +1,6 @@
The MIT License (MIT)
-Copyright (c) 2011-2019 Twitter, Inc.
-Copyright (c) 2011-2019 The Bootstrap Authors
+Copyright (c) 2011-2025 The Bootstrap Authors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index 06a76c050882..154c3f2d48e7 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
`} />
+
+### Methods
+
+You can create a button instance with the button constructor, for example:
+
+```js
+const bsButton = new bootstrap.Button('#myButton')
+```
+
+
+| Method | Description |
+| --- | --- |
+| `dispose` | Destroys an element’s button. (Removes stored data on the DOM element) |
+| `getInstance` | Static method which allows you to get the button instance associated with a DOM element, you can use it like this: `bootstrap.Button.getInstance(element)`. |
+| `getOrCreateInstance` | Static method which returns a button instance associated with a DOM element or creates a new one in case it wasn’t initialized. You can use it like this: `bootstrap.Button.getOrCreateInstance(element)`. |
+| `toggle` | Toggles push state. Gives the button the appearance that it has been activated. |
+
+
+For example, to toggle all buttons
+
+```js
+document.querySelectorAll('.btn').forEach(buttonElement => {
+ const button = bootstrap.Button.getOrCreateInstance(buttonElement)
+ button.toggle()
+})
+```
+
+## CSS
+
+### Variables
+
+
+
+As part of Bootstrap’s evolving CSS variables approach, buttons now use local CSS variables on `.btn` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+
+
+Each `.btn-*` modifier class updates the appropriate CSS variables to minimize additional CSS rules with our `button-variant()`, `button-outline-variant()`, and `button-size()` mixins.
+
+Here’s an example of building a custom `.btn-*` modifier class as we do for the buttons unique to our docs by reassigning Bootstrap’s CSS variables with a mixture of our own CSS and Sass variables.
+
+
+
+
+
+
+
+### Sass variables
+
+
+
+### Sass mixins
+
+There are three mixins for buttons: button and button outline variant mixins (both based on `$theme-colors`), plus a button size mixin.
+
+
+
+
+
+
+
+### Sass loops
+
+Button variants (for regular and outline buttons) use their respective mixins with our `$theme-colors` map to generate the modifier classes in `scss/_buttons.scss`.
+
+
diff --git a/site/src/content/docs/components/card.mdx b/site/src/content/docs/components/card.mdx
new file mode 100644
index 000000000000..1cf25220cfc9
--- /dev/null
+++ b/site/src/content/docs/components/card.mdx
@@ -0,0 +1,673 @@
+---
+title: Cards
+description: Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
+toc: true
+---
+
+import { getData } from '@libs/data'
+
+## About
+
+A **card** is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.
+
+## Example
+
+Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no `margin` by default, so use [spacing utilities]([[docsref:/utilities/spacing]]) as needed.
+
+Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various [sizing options](#sizing).
+
+
+
+
+
Card title
+
Some quick example text to build on the card title and make up the bulk of the card’s content.
+ `} />
+
+## Content types
+
+Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.
+
+### Body
+
+The building block of a card is the `.card-body`. Use it whenever you need a padded section within a card.
+
+
+
+ `} />
+
+### Images
+
+`.card-img-top` and `.card-img-bottom` respectively set the top and bottom corners rounded to match the card’s borders. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.
+
+
+
+
+
Some quick example text to build on the card title and make up the bulk of the card’s content.
+
+ `} />
+
+### List groups
+
+Create lists of content in a card with a flush list group.
+
+
+
+
An item
+
A second item
+
A third item
+
+ `} />
+
+
+
+ Featured
+
+
+
An item
+
A second item
+
A third item
+
+ `} />
+
+
+
+
An item
+
A second item
+
A third item
+
+
+ `} />
+
+### Kitchen sink
+
+Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
+
+
+
+
+
Card title
+
Some quick example text to build on the card title and make up the bulk of the card’s content.
+
+ `} />
+
+## Sizing
+
+Cards assume no specific `width` to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.
+
+### Using grid markup
+
+Using the grid, wrap cards in columns and rows as needed.
+
+
+
+
+
+
Special title treatment
+
With supporting text below as a natural lead-in to additional content.
+ `} />
+
+## Text alignment
+
+You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]([[docsref:/utilities/text#text-alignment]]).
+
+
+
+
Special title treatment
+
With supporting text below as a natural lead-in to additional content.
+ `} />
+
+## Images
+
+Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.
+
+### Image caps
+
+Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.
+
+
+
+
+
Card title
+
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
Last updated 3 mins ago
+
+
+
+
+
Card title
+
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
Last updated 3 mins ago
+
+
+
`} />
+
+### Image overlays
+
+Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.
+
+
+
+
+
Card title
+
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
Last updated 3 mins ago
+
+ `} />
+
+
+Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image.
+
+
+## Horizontal
+
+Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.g-0` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content.
+
+
+
+
+
+
+
+
+
Card title
+
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
Last updated 3 mins ago
+
+
+
+ `} />
+
+## Card styles
+
+Cards include various options for customizing their backgrounds, borders, and color.
+
+### Background and color
+
+
+
+Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]([[docsref:helpers/color-background]]). Previously it was required to manually pair your choice of [`.text-{color}`]([[docsref:/utilities/colors]]) and [`.bg-{color}`]([[docsref:/utilities/background]]) utilities for styling, which you still may use if you prefer.
+
+ `
+
Header
+
+
${themeColor.title} card title
+
Some quick example text to build on the card title and make up the bulk of the card’s content.
+
+
`)} />
+
+
+
+### Border
+
+Use [border utilities]([[docsref:/utilities/borders]]) to change just the `border-color` of a card. Note that you can put `.text-{color}` classes on the parent `.card` or a subset of the card’s contents as shown below.
+
+ `
+
Header
+
+
${themeColor.title} card title
+
Some quick example text to build on the card title and make up the bulk of the card’s content.
+
+
`)} />
+
+### Mixins utilities
+
+You can also change the borders on the card header and footer as needed, and even remove their `background-color` with `.bg-transparent`.
+
+
+
Header
+
+
Success card title
+
Some quick example text to build on the card title and make up the bulk of the card’s content.
+
+
+ `} />
+
+## Card layout
+
+In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, **these layout options are not yet responsive**.
+
+### Card groups
+
+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.
+
+
+
+
+
+
Card title
+
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
Last updated 3 mins ago
+
+
+
+
+
+
Card title
+
This card has supporting text below as a natural lead-in to additional content.
+
Last updated 3 mins ago
+
+
+
+
+
+
Card title
+
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
Last updated 3 mins ago
+
+
+ `} />
+
+When using card groups with footers, their content will automatically line up.
+
+
+
+
+
+
Card title
+
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
+
+
+
+
+
+
Card title
+
This card has supporting text below as a natural lead-in to additional content.
+
+
+
+
+
+
+
Card title
+
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+ `} />
+
+### Grid cards
+
+Use the Bootstrap grid system and its [`.row-cols` classes]([[docsref:/layout/grid#row-columns]]) to control how many grid columns (wrapped around your cards) you show per row. For example, here’s `.row-cols-1` laying out the cards on one column, and `.row-cols-md-2` splitting four cards to equal width across multiple rows, from the medium breakpoint up.
+
+
+
+
+
+
+
Card title
+
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
+
+
+
+
+
+
+
Card title
+
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
+
+
+
+
+
+
+
Card title
+
This is a longer card with supporting text below as a natural lead-in to additional content.
+
+
+
+
+
+
+
+
Card title
+
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
+
+
+ `} />
+
+Change it to `.row-cols-3` and you’ll see the fourth card wrap.
+
+
+
+
+
+
+
Card title
+
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
+
+
+
+
+
+
+
Card title
+
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
+
+
+
+
+
+
+
Card title
+
This is a longer card with supporting text below as a natural lead-in to additional content.
+
+
+
+
+
+
+
+
Card title
+
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
+
+
+ `} />
+
+When you need equal height, add `.h-100` to the cards. If you want equal heights by default, you can set `$card-height: 100%` in Sass.
+
+
+
+
+
+
+
Card title
+
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
+
+
+
+
+
+
+
Card title
+
This is a short card.
+
+
+
+
+
+
+
+
Card title
+
This is a longer card with supporting text below as a natural lead-in to additional content.
+
+
+
+
+
+
+
+
Card title
+
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
+
+
+ `} />
+
+Just like with card groups, card footers will automatically line up.
+
+
+
+
+
+
+
Card title
+
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
+
+
+
+
+
+
+
+
Card title
+
This card has supporting text below as a natural lead-in to additional content.
+
+
+
+
+
+
+
+
+
Card title
+
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+ `} />
+
+### Masonry
+
+In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://masonry.desandro.com/)-like columns, but this technique came with lots of unpleasant [side effects](https://github.com/twbs/bootstrap/pull/28922). If you want to have this type of layout in `v5`, you can just make use of Masonry plugin. **Masonry is not included in Bootstrap**, but we’ve made a [demo example]([[docsref:/examples/masonry]]) to help you get started.
+
+## CSS
+
+### Variables
+
+
+
+As part of Bootstrap’s evolving CSS variables approach, cards now use local CSS variables on `.card` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+
+
+### Sass variables
+
+
diff --git a/site/src/content/docs/components/carousel.mdx b/site/src/content/docs/components/carousel.mdx
new file mode 100644
index 000000000000..397f7da876c9
--- /dev/null
+++ b/site/src/content/docs/components/carousel.mdx
@@ -0,0 +1,420 @@
+---
+title: Carousel
+description: A slideshow component for cycling through elements—images or slides of text—like a carousel.
+toc: true
+---
+
+## How it works
+
+- The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
+
+- For performance reasons, **carousels must be manually initialized** using the [carousel constructor method](#methods). Without initialization, some of the event listeners (specifically, the events needed touch/swipe support) will not be registered until a user has explicitly activated a control or indicator.
+
+ The only exception are [autoplaying carousels](#autoplaying-carousels) with the `data-bs-ride="carousel"` attribute as these are initialized automatically on page load. If you’re using autoplaying carousels with the data attribute, **don’t explicitly initialize the same carousels with the constructor method.**
+
+- Nested carousels are not supported. You should also be aware that carousels in general can often cause usability and accessibility challenges.
+
+
+
+## Basic examples
+
+Here is a basic example of a carousel with three slides. Note the previous/next controls. We recommend using `
+
+
+
+
Offcanvas right
+
+
+
+ ...
+
+
`} />
+
+Toggle bottom offcanvas
+
+
+
+
Offcanvas bottom
+
+
+
+ ...
+
+
`} />
+
+## Accessibility
+
+Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-labelledby="..."`—referencing the offcanvas title—to `.offcanvas`. Note that you don’t need to add `role="dialog"` since we already add it via JavaScript.
+
+## CSS
+
+### Variables
+
+
+
+As part of Bootstrap’s evolving CSS variables approach, offcanvas now uses local CSS variables on `.offcanvas` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+
+
+### Sass variables
+
+
+
+## Usage
+
+The offcanvas plugin utilizes a few classes and attributes to handle the heavy lifting:
+
+- `.offcanvas` hides the content
+- `.offcanvas.show` shows the content
+- `.offcanvas-start` hides the offcanvas on the left
+- `.offcanvas-end` hides the offcanvas on the right
+- `.offcanvas-top` hides the offcanvas on the top
+- `.offcanvas-bottom` hides the offcanvas on the bottom
+
+Add a dismiss button with the `data-bs-dismiss="offcanvas"` attribute, which triggers the JavaScript functionality. Be sure to use the ``} />
+
+### Four directions
+
+Four options are available: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL. Set `data-bs-placement` to change the direction.
+
+
+ Popover on top
+
+
+
+ `} />
+
+### Custom `container`
+
+When you have some styles on a parent element that interfere with a popover, you’ll want to specify a custom `container` so that the popover’s HTML appears within that element instead. This is common in responsive tables, input groups, and the like.
+
+```js
+const popover = new bootstrap.Popover('.example-popover', {
+ container: 'body'
+})
+```
+
+Another situation where you’ll want to set an explicit custom `container` are popovers inside a [modal dialog]([[docsref:/components/modal]]), to make sure that the popover itself is appended to the modal. This is particularly important for popovers that contain interactive elements – modal dialogs will trap focus, so unless the popover is a child element of the modal, users won’t be able to focus or activate these interactive elements.
+
+```js
+const popover = new bootstrap.Popover('.example-popover', {
+ container: '.modal-body'
+})
+```
+
+### Custom popovers
+
+
+
+You can customize the appearance of popovers using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-popover"` to scope our custom appearance and use it to override some of the local CSS variables.
+
+
+
+
+ Custom popover
+ `} />
+
+### Dismiss on next click
+
+Use the `focus` trigger to dismiss popovers on the user’s next click of an element other than the toggle element.
+
+
+**Dismissing on next click requires specific HTML for proper cross-browser and cross-platform behavior.** You can only use `` elements, not `
+
+Dismissible popover`} />
+
+```js
+const popover = new bootstrap.Popover('.popover-dismiss', {
+ trigger: 'focus'
+})
+```
+
+### Disabled elements
+
+Elements with the `disabled` attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you’ll want to trigger the popover from a wrapper `
` or ``, ideally made keyboard-focusable using `tabindex="0"`.
+
+For disabled popover triggers, you may also prefer `data-bs-trigger="hover focus"` so that the popover appears as immediate visual feedback to your users as they may not expect to _click_ on a disabled element.
+
+
+
+ `} />
+
+## CSS
+
+### Variables
+
+
+
+As part of Bootstrap’s evolving CSS variables approach, popovers now use local CSS variables on `.popover` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+
+
+### Sass variables
+
+
+
+## Usage
+
+Enable popovers via JavaScript:
+
+```js
+const exampleEl = document.getElementById('example')
+const popover = new bootstrap.Popover(exampleEl, options)
+```
+
+
+**Keep popovers accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce popovers in this situation. Additionally, do not rely solely on `hover` as the trigger for your popovers as this will make them impossible to trigger for keyboard users.
+
+Avoid adding an excessive amount of content in popovers with the `html` option. Once popovers are displayed, their content is tied to the trigger element with the `aria-describedby` attribute, causing all of the popover’s content to be announced to assistive technology users as one long, uninterrupted stream.
+
+Popovers do not manage keyboard focus order, and their placement can be random in the DOM, so be careful when adding interactive elements (like forms or links), as it may lead to an illogical focus order or make the popover content itself completely unreachable for keyboard users. In cases where you must use these elements, consider using a modal dialog instead.
+
+
+### Options
+
+
+
+
+Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.
+
+
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `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. |
+| `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 }`. |
+| `fallbackPlacements` | string, 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). |
+| `html` | boolean | `false` | Allow HTML in the popover. If true, HTML tags in the popover’s `title` will be rendered in the popover. If false, `innerText` property will be used to insert content into the DOM. Use text if you’re worried about XSS attacks. |
+| `offset` | number, string, function | `[0, 8]` | Offset of the popover relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper’s [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
+| `placement` | string, function | `'right'` | How to position the popover: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the popover. When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the popover instance. |
+| `popperConfig` | null, object, function | `null` | To change Bootstrap’s default Popper config, see [Popper’s configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it’s called with an object that contains the Bootstrap’s default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. |
+| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
+| `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
+| `selector` | string, false | `false` | If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to also apply popovers to dynamically added DOM elements (`jQuery.on` support). See [this issue]([[config:repo]]/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. |
+| `template` | string | `'
'` | Base HTML to use when creating the popover. The popover’s `title` will be injected into the `.popover-header`. The popover’s `content` will be injected into the `.popover-body`. `.popover-arrow` will become the popover’s arrow. The outermost wrapper element should have the `.popover` class and `role="tooltip"`. |
+| `title` | string, element, function | `''` | The popover title. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
+| `trigger` | string | `'click'` | How popover is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the popover will be triggered programmatically via the `.popover('show')`, `.popover('hide')` and `.popover('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in popovers that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |
+
+
+
+#### Data attributes for individual popovers
+
+Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.
+
+
+#### Using function with `popperConfig`
+
+```js
+const popover = new bootstrap.Popover(element, {
+ popperConfig(defaultBsPopperConfig) {
+ // const newPopperConfig = {...}
+ // use defaultBsPopperConfig if needed...
+ // return newPopperConfig
+ }
+})
+```
+
+### Methods
+
+
+
+
+| Method | Description |
+| --- | --- |
+| `disable` | Removes the ability for an element’s popover to be shown. The popover will only be able to be shown if it is re-enabled. |
+| `dispose` | Hides and destroys an element’s popover (Removes stored data on the DOM element). Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. |
+| `enable` | Gives an element’s popover the ability to be shown. **Popovers are enabled by default.** |
+| `getInstance` | _Static_ method which allows you to get the popover instance associated with a DOM element. |
+| `getOrCreateInstance` | _Static_ method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn’t initialized. |
+| `hide` | Hides an element’s popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.bs.popover` event occurs). This is considered a “manual” triggering of the popover. |
+| `setContent` | Gives a way to change the popover’s content after its initialization. |
+| `show` | Reveals an element’s popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.bs.popover` event occurs). This is considered a “manual” triggering of the popover. Popovers whose title and content are both zero-length are never displayed. |
+| `toggle` | Toggles an element’s popover. **Returns to the caller before the popover has actually been shown or hidden** (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). This is considered a “manual” triggering of the popover. |
+| `toggleEnabled` | Toggles the ability for an element’s popover to be shown or hidden. |
+| `update` | Updates the position of an element’s popover. |
+
+
+
+```js
+// getOrCreateInstance example
+const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance
+
+// setContent example
+popover.setContent({
+ '.popover-header': 'another title',
+ '.popover-body': 'another content'
+})
+```
+
+
+The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the popover template, and each related property-value can be `string` | `element` | `function` | `null`
+
+
+### Events
+
+
+| Event | Description |
+| --- | --- |
+| `hide.bs.popover` | This event is fired immediately when the `hide` instance method has been called. |
+| `hidden.bs.popover` | This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). |
+| `inserted.bs.popover` | This event is fired after the `show.bs.popover` event when the popover template has been added to the DOM. |
+| `show.bs.popover` | This event fires immediately when the `show` instance method is called. |
+| `shown.bs.popover` | This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). |
+
+
+```js
+const myPopoverTrigger = document.getElementById('myPopover')
+myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
+ // do something...
+})
+```
diff --git a/site/src/content/docs/components/progress.mdx b/site/src/content/docs/components/progress.mdx
new file mode 100644
index 000000000000..89fa322249dc
--- /dev/null
+++ b/site/src/content/docs/components/progress.mdx
@@ -0,0 +1,174 @@
+---
+title: Progress
+description: Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
+toc: true
+---
+
+
+**New markup in v5.3.0 —** We’ve deprecated the previous HTML structure for progress bars and replaced it with a more accessible one. The previous structure will continue to work until v6. [See what’s changed in our migration guide.]([[docsref:/migration#improved-markup-for-progress-bars]])
+
+
+## How it works
+
+Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use [the HTML5 `
+
+
+
+
+
+
+
+
+
+
+
+
`} />
+
+## Bar sizing
+
+### Width
+
+Bootstrap provides a handful of [utilities for setting width]([[docsref:/utilities/sizing]]). Depending on your needs, these may help with quickly configuring the width of the `.progress-bar`.
+
+
+
+ `} />
+
+### Height
+
+You only set a `height` value on the `.progress` container, so if you change that value, the inner `.progress-bar` will automatically resize accordingly.
+
+
+
+
+
+
+
`} />
+
+## Labels
+
+Add labels to your progress bars by placing text within the `.progress-bar`.
+
+
+
25%
+ `} />
+
+### Long labels
+
+Note that by default, the content inside the `.progress-bar` is controlled with `overflow: hidden`, so it doesn’t bleed out of the bar. If your progress bar is shorter than its label, the content will be capped and may become unreadable. To change this behavior, you can use `.overflow-visible` from the [overflow utilities]([[docsref:/utilities/overflow]]).
+
+
+Labels longer than the progress bar within may not be fully accessible using this method because it relies on the text color having the correct contrast ratio with both the `.progress` and `.progress-bar` background colors. Use caution when implementing this example.
+
+If the text can overlap the progress bar, we often recommend displaying the label outside of the progress bar for better accessibility.
+
+
+## Backgrounds
+
+Use background utility classes to change the appearance of individual progress bars.
+
+
+
+
+
+
+
+
+
+
+
+
+
`} />
+
+
+
+If you’re adding labels to progress bars with a custom background color, make sure to also set an appropriate [text color]([[docsref:/utilities/colors#colors]]), so the labels remain readable and have sufficient contrast. We recommend using the [color and background]([[docsref:/helpers/color-background]]) helper classes.
+
+
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
`} />
+
+## Multiple bars
+
+You can include multiple progress components inside a container with `.progress-stacked` to create a single stacked progress bar. Note that in this case, the styling to set the visual width of the progress bar *must* be applied to the `.progress` elements, rather than the `.progress-bar`s.
+
+
+
+
+
+
+
+
+
+
+
+ `} />
+
+## Striped
+
+Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar’s background color.
+
+
+
+
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Second heading
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Third heading
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Fourth heading
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Fifth heading
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
`} />
+
+```html
+
+
+
First heading
+
...
+
Second heading
+
...
+
Third heading
+
...
+
Fourth heading
+
...
+
Fifth heading
+
...
+
+```
+
+### Nested nav
+
+Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its parents will also be `.active`. Scroll the area next to the navbar and watch the active class change.
+
+
+
+
+
+
+
+
+
+
Item 1
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
+
+
+
Item 1-1
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
+
+
+
Item 1-2
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
+
+
+
Item 2
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
+
+
+
Item 3
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
+
+
+
Item 3-1
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
+
+
+
Item 3-2
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
+
+
+
+
+
+
+```html
+
+
+
+
+
+
+
+
+
Item 1
+
...
+
+
+
Item 1-1
+
...
+
+
+
Item 1-2
+
...
+
+
+
Item 2
+
...
+
+
+
Item 3
+
...
+
+
+
Item 3-1
+
...
+
+
+
Item 3-2
+
...
+
+
+
+
+```
+
+### List group
+
+Scrollspy also works with `.list-group`s. Scroll the area next to the list group and watch the active class change.
+
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Item 2
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Item 3
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Item 4
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Item 2
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Item 3
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Item 4
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
Item 5
+
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+```
+
+## Non-visible elements
+
+Target elements that aren’t visible will be ignored and their corresponding nav items won’t receive an `.active` class. Scrollspy instances initialized in a non-visible wrapper will ignore all target elements. Use the `refresh` method to check for observable elements once the wrapper becomes visible.
+
+```js
+document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
+ el.addEventListener('shown.bs.tab', () => {
+ const target = el.getAttribute('data-bs-target')
+ const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
+ bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
+ })
+})
+```
+
+## Usage
+
+### Via data attributes
+
+To easily add scrollspy behavior to your topbar navigation, add `data-bs-spy="scroll"` to the element you want to spy on (most typically this would be the ``). Then add the `data-bs-target` attribute with the `id` or class name of the parent element of any Bootstrap `.nav` component.
+
+```html
+
+ ...
+
+
+ ...
+
+
+ ...
+
+```
+
+### Via JavaScript
+
+```js
+const scrollSpy = new bootstrap.ScrollSpy(document.body, {
+ target: '#navbar-example'
+})
+```
+
+### Options
+
+
+
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `rootMargin` | string | `0px 0px -25%` | Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) valid units, when calculating scroll position. |
+| `smoothScroll` | boolean | `false` | Enables smooth scrolling when a user clicks on a link that refers to ScrollSpy observables. |
+| `target` | string, DOM element | `null` | Specifies element to apply Scrollspy plugin. |
+| `threshold` | array | `[0.1, 0.5, 1]` | `IntersectionObserver` [threshold](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#threshold) valid input, when calculating scroll position. |
+
+
+
+
+**Deprecated Options**
+
+Up until v5.1.3 we were using `offset` & `method` options, which are now deprecated and replaced by `rootMargin`.
+To keep backwards compatibility, we will continue to parse a given `offset` to `rootMargin`, but this feature will be removed in **v6**.
+
+
+### Methods
+
+
+| Method | Description |
+| --- | --- |
+| `dispose` | Destroys an element’s scrollspy. (Removes stored data on the DOM element) |
+| `getInstance` | *Static* method to get the scrollspy instance associated with a DOM element. |
+| `getOrCreateInstance` | *Static* method to get the scrollspy instance associated with a DOM element, or to create a new one in case it wasn’t initialized. |
+| `refresh` | When adding or removing elements in the DOM, you’ll need to call the refresh method. |
+
+
+Here’s an example using the refresh method:
+
+```js
+const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
+dataSpyList.forEach(dataSpyEl => {
+ bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
+})
+```
+
+### Events
+
+
+| Event | Description |
+| --- | --- |
+| `activate.bs.scrollspy` | This event fires on the scroll element whenever an anchor is activated by the scrollspy. |
+
+
+```js
+const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
+firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
+ // do something...
+})
+```
diff --git a/site/src/content/docs/components/spinners.mdx b/site/src/content/docs/components/spinners.mdx
new file mode 100644
index 000000000000..354c001d4257
--- /dev/null
+++ b/site/src/content/docs/components/spinners.mdx
@@ -0,0 +1,175 @@
+---
+title: Spinners
+description: Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.
+toc: true
+---
+
+import { getData } from '@libs/data'
+
+## About
+
+Bootstrap “spinners” can be used to show the loading state in your projects. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.
+
+For accessibility purposes, each loader here includes `role="status"` and a nested `Loading...`.
+
+
+
+## Border spinner
+
+Use the border spinners for a lightweight loading indicator.
+
+
+ Loading...
+ `} />
+
+### Colors
+
+The border spinner uses `currentColor` for its `border-color`, meaning you can customize the color with [text color utilities][color]. You can use any of our text color utilities on the standard spinner.
+
+ `
+ Loading...
+
`)} />
+
+
+**Why not use `border-color` utilities?** Each border spinner specifies a `transparent` border for at least one side, so `.border-{color}` utilities would override that.
+
+
+## Growing spinner
+
+If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!
+
+
+ Loading...
+ `} />
+
+Once again, this spinner is built with `currentColor`, so you can easily change its appearance with [text color utilities][color]. Here it is in blue, along with the supported variants.
+
+ `
+ Loading...
+
`)} />
+
+## Alignment
+
+Spinners in Bootstrap are built with `rem`s, `currentColor`, and `display: inline-flex`. This means they can easily be resized, recolored, and quickly aligned.
+
+### Margin
+
+Use [margin utilities][margin] like `.m-5` for easy spacing.
+
+
+ Loading...
+ `} />
+
+### Placement
+
+Use [flexbox utilities][flex], [float utilities][float], or [text alignment][text] utilities to place spinners exactly where you need them in any situation.
+
+#### Flex
+
+
+
+ `} />
+
+## Size
+
+Add `.spinner-border-sm` and `.spinner-grow-sm` to make a smaller spinner that can quickly be used within other components.
+
+
+ Loading...
+
+
+ Loading...
+
`} />
+
+Or, use custom CSS or inline styles to change the dimensions as needed.
+
+
+ Loading...
+
+
+ Loading...
+
`} />
+
+## Buttons
+
+Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
+
+
+
+ Loading...
+
+ `} />
+
+
+
+ Loading...
+
+ `} />
+
+## CSS
+
+### Variables
+
+
+
+As part of Bootstrap’s evolving CSS variables approach, spinners now use local CSS variables on `.spinner-border` and `.spinner-grow` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+Border spinner variables:
+
+
+
+Growing spinner variables:
+
+
+
+For both spinners, small spinner modifier classes are used to update the values of these CSS variables as needed. For example, the `.spinner-border-sm` class does the following:
+
+
+
+### Sass variables
+
+
+
+### Keyframes
+
+Used for creating the CSS animations for our spinners. Included in `scss/_spinners.scss`.
+
+
+
+
+
+
+[color]: [[docsref:/utilities/colors]]
+[flex]: [[docsref:/utilities/flex]]
+[float]: [[docsref:/utilities/float]]
+[margin]: [[docsref:/utilities/spacing]]
+[text]: [[docsref:/utilities/text]]
diff --git a/site/src/content/docs/components/toasts.mdx b/site/src/content/docs/components/toasts.mdx
new file mode 100644
index 000000000000..38b7863c60bc
--- /dev/null
+++ b/site/src/content/docs/components/toasts.mdx
@@ -0,0 +1,363 @@
+---
+title: Toasts
+description: Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
+toc: true
+---
+
+Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.
+
+## Overview
+
+Things to know when using the toast plugin:
+
+- Toasts are opt-in for performance reasons, so **you must initialize them yourself**.
+- Toasts will automatically hide if you do not specify `autohide: false`.
+
+
+
+## Examples
+
+### Basic
+
+To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use `display: flex`, allowing easy alignment of content thanks to our margin and flexbox utilities.
+
+Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your “toasted” content and strongly encourage a dismiss button.
+
+
+
+
+ Bootstrap
+ 11 mins ago
+
+
+
+ Hello, world! This is a toast message.
+
+ `} />
+
+
+Previously, our scripts dynamically added the `.hide` class to completely hide a toast (with `display:none`, rather than just with `opacity:0`). This is now not necessary anymore. However, for backwards compatibility, our script will continue to toggle the class (even though there is no practical need for it) until the next major version.
+
+
+### Live example
+
+Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default.
+
+
+
+
+
+ Bootstrap
+ 11 mins ago
+
+
+
+ Hello, world! This is a toast message.
+
+
+
+
+
+
+
+
+```html
+
+
+
+
+
+
+ Bootstrap
+ 11 mins ago
+
+
+
+ Hello, world! This is a toast message.
+
+
+
+```
+
+We use the following JavaScript to trigger our live toast demo:
+
+
+
+### Translucent
+
+Toasts are slightly translucent to blend in with what’s below them.
+
+
+
+
+ Bootstrap
+ 11 mins ago
+
+
+
+ Hello, world! This is a toast message.
+
+ `} />
+
+### Stacking
+
+You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
+
+
+
+
+
+ Bootstrap
+ just now
+
+
+
+ See? Just like this.
+
+
+
+
+
+
+ Bootstrap
+ 2 seconds ago
+
+
+
+ Heads up, toasts will stack automatically
+
+
+ `} />
+
+### Custom content
+
+Customize your toasts by removing sub-components, tweaking them with [utilities]([[docsref:/utilities/api]]), or by adding your own markup. Here we’ve created a simpler toast by removing the default `.toast-header`, adding a custom hide icon from [Bootstrap Icons]([[config:icons]]), and using some [flexbox utilities]([[docsref:/utilities/flex]]) to adjust the layout.
+
+
+
+
+ Hello, world! This is a toast message.
+
+
+
+ `} />
+
+Alternatively, you can also add additional controls and components to toasts.
+
+
+
+ Hello, world! This is a toast message.
+
+
+
+
+
+ `} />
+
+### Color schemes
+
+Building on the above example, you can create different toast color schemes with our [color]([[docsref:/utilities/colors]]) and [background]([[docsref:/utilities/background]]) utilities. Here we’ve added `.text-bg-primary` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.
+
+
+
+
+ Hello, world! This is a toast message.
+
+
+
+ `} />
+
+## Placement
+
+Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you’re only ever going to show one toast at a time, put the positioning styles right on the `.toast`.
+
+
+
+
+
+
+
+
+
+
+
+
+ Bootstrap
+ 11 mins ago
+
+
+ Hello, world! This is a toast message.
+
+
+
+
`} />
+
+For systems that generate more notifications, consider using a wrapping element so they can easily stack.
+
+
+
+
+
+
+
+
+
+
+
+
+ Bootstrap
+ just now
+
+
+
+ See? Just like this.
+
+
+
+
+
+
+ Bootstrap
+ 2 seconds ago
+
+
+
+ Heads up, toasts will stack automatically
+
+
+
+ `} />
+
+You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.
+
+
+
+
+
+
+
+
+ Bootstrap
+ 11 mins ago
+
+
+
+ Hello, world! This is a toast message.
+
+
+
`} />
+
+## Accessibility
+
+Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an [`aria-live` region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user’s focus or otherwise interrupt the user. Additionally, include `aria-atomic="true"` to ensure that the entire toast is always announced as a single (atomic) unit, rather than just announcing what was changed (which could lead to problems if you only update part of the toast’s content, or if displaying the same toast content at a later point in time). If the information needed is important for the process, e.g. for a list of errors in a form, then use the [alert component]([[docsref:/components/alerts]]) instead of toast.
+
+Note that the live region needs to be present in the markup *before* the toast is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.
+
+You also need to adapt the `role` and `aria-live` level depending on the content. If it’s an important message like an error, use `role="alert" aria-live="assertive"`, otherwise use `role="status" aria-live="polite"` attributes.
+
+As the content you’re displaying changes, be sure to update the [`delay` timeout](#options) so that users have enough time to read the toast.
+
+```html
+
+
...
+
+```
+
+When using `autohide: false`, you must add a close button to allow users to dismiss the toast.
+
+
+
+
+ Bootstrap
+ 11 mins ago
+
+
+
+ Hello, world! This is a toast message.
+
+ `} />
+
+While technically it’s possible to add focusable/actionable controls (such as additional buttons or links) in your toast, you should avoid doing this for autohiding toasts. Even if you give the toast a long [`delay` timeout](#options), keyboard and assistive technology users may find it difficult to reach the toast in time to take action (since toasts don’t receive focus when they are displayed). If you absolutely must have further controls, we recommend using a toast with `autohide: false`.
+
+## CSS
+
+### Variables
+
+
+
+As part of Bootstrap’s evolving CSS variables approach, toasts now use local CSS variables on `.toast` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+
+
+### Sass variables
+
+
+
+## Usage
+
+Initialize toasts via JavaScript:
+
+```js
+const toastElList = document.querySelectorAll('.toast')
+const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))
+```
+
+### Triggers
+
+
+
+### Options
+
+
+
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `animation` | boolean | `true` | Apply a CSS fade transition to the toast. |
+| `autohide` | boolean | `true` | Automatically hide the toast after the delay. |
+| `delay` | number | `5000` | Delay in milliseconds before hiding the toast. |
+
+
+### Methods
+
+
+
+
+| Method | Description |
+| --- | --- |
+| `dispose` | Hides an element’s toast. Your toast will remain on the DOM but won’t show anymore. |
+| `getInstance` | *Static* method which allows you to get the toast instance associated with a DOM element. For example: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)` Returns a Bootstrap toast instance. |
+| `getOrCreateInstance` | *Static* method which allows you to get the toast instance associated with a DOM element, or create a new one, in case it wasn’t initialized. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)` Returns a Bootstrap toast instance. |
+| `hide` | Hides an element’s toast. **Returns to the caller before the toast has actually been hidden** (i.e. before the `hidden.bs.toast` event occurs). You have to manually call this method if you made `autohide` to `false`. |
+| `isShown` | Returns a boolean according to toast’s visibility state. |
+| `show` | Reveals an element’s toast. **Returns to the caller before the toast has actually been shown** (i.e. before the `shown.bs.toast` event occurs). You have to manually call this method, instead your toast won’t show. |
+
+
+### Events
+
+
+| Event | Description |
+| --- | --- |
+| `hide.bs.toast` | This event is fired immediately when the `hide` instance method has been called. |
+| `hidden.bs.toast` | This event is fired when the toast has finished being hidden from the user. |
+| `show.bs.toast` | This event fires immediately when the `show` instance method is called. |
+| `shown.bs.toast` | This event is fired when the toast has been made visible to the user. |
+
+
+```js
+const myToastEl = document.getElementById('myToast')
+myToastEl.addEventListener('hidden.bs.toast', () => {
+ // do something...
+})
+```
diff --git a/site/src/content/docs/components/tooltips.mdx b/site/src/content/docs/components/tooltips.mdx
new file mode 100644
index 000000000000..50b0d5212c99
--- /dev/null
+++ b/site/src/content/docs/components/tooltips.mdx
@@ -0,0 +1,270 @@
+---
+title: Tooltips
+description: Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.
+toc: true
+---
+
+## Overview
+
+Things to know when using the tooltip plugin:
+
+- Tooltips rely on the third party library [Popper](https://popper.js.org/docs/v2/) for positioning. You must include [popper.min.js]([[config: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).
+- Triggering tooltips on hidden elements will not work.
+- Tooltips for `.disabled` or `disabled` elements must be triggered on a wrapper element.
+- When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use `white-space: nowrap;` on your ``s to avoid this behavior.
+- Tooltips must be hidden before their corresponding elements have been removed from the DOM.
+- Tooltips can be triggered thanks to an element inside a shadow DOM.
+
+Got all that? Great, let’s see how they work with some examples.
+
+
+
+
+
+## Examples
+
+### Enable tooltips
+
+As mentioned above, you must initialize tooltips before they can be used. One way to initialize all tooltips on a page would be to select them by their `data-bs-toggle` attribute, like so:
+
+```js
+const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
+```
+
+### Tooltips on links
+
+Hover over the links below to see tooltips:
+
+Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you’ve now seen how these tooltips on links can work in practice, once you use them on your own site or project.`} />
+
+
+
+### Custom tooltips
+
+
+
+You can customize the appearance of tooltips using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-tooltip"` to scope our custom appearance and use it to override a local CSS variable.
+
+
+
+
+ Custom tooltip
+ `} />
+
+### Directions
+
+Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL.
+
+
+
+
+
+
+
+ `} />
+
+```html
+
+
+
+
+```
+
+And with custom HTML added:
+
+```html
+
+```
+
+With an SVG:
+
+
+
+## CSS
+
+### Variables
+
+
+
+As part of Bootstrap’s evolving CSS variables approach, tooltips now use local CSS variables on `.tooltip` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+
+
+### Sass variables
+
+
+
+## Usage
+
+The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. Trigger the tooltip via JavaScript:
+
+```js
+const exampleEl = document.getElementById('example')
+const tooltip = new bootstrap.Tooltip(exampleEl, options)
+```
+
+
+Tooltips automatically attempt to change positions when a parent container has `overflow: auto` or `overflow: scroll`, but still keeps the original placement’s positioning. Set the [`boundary` option](https://popper.js.org/docs/v2/modifiers/flip/#boundary) (for the flip modifier using the `popperConfig` option) to any HTMLElement to override the default value, `'clippingParents'`, such as `document.body`:
+
+```js
+const tooltip = new bootstrap.Tooltip('#example', {
+ boundary: document.body // or document.querySelector('#boundary')
+})
+```
+
+
+### Markup
+
+The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin).
+
+
+**Keep tooltips accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce tooltips in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltips as this will make them impossible to trigger for keyboard users.
+
+
+```html
+
+Hover over me
+
+
+
+
+
+ Some tooltip text!
+
+
+```
+
+### Disabled elements
+
+Elements with the `disabled` attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper `
` or ``, ideally made keyboard-focusable using `tabindex="0"`.
+
+
+
+ `} />
+
+### Options
+
+
+
+
+Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.
+
+
+
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `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. |
+| `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). |
+| `html` | boolean | `false` | Allow HTML in the tooltip. If true, HTML tags in the tooltip’s `title` will be rendered in the tooltip. If false, `innerText` property will be used to insert content into the DOM. Use text if you’re worried about XSS attacks. |
+| `offset` | array, string, function | `[0, 6]` | Offset of the tooltip relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper’s [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
+| `placement` | string, function | `'top'` | How to position the tooltip: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the tooltip. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the tooltip instance. |
+| `popperConfig` | null, object, function | `null` | To change Bootstrap’s default Popper config, see [Popper’s configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it’s called with an object that contains the Bootstrap’s default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. |
+| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
+| `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
+| `selector` | string, false | `false` | If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (`jQuery.on` support). See [this issue]([[config:repo]]/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. |
+| `template` | string | `'
'` | Base HTML to use when creating the tooltip. The tooltip’s `title` will be injected into the `.tooltip-inner`. `.tooltip-arrow` will become the tooltip’s arrow. The outermost wrapper element should have the `.tooltip` class and `role="tooltip"`. |
+| `title` | string, element, function | `''` | The tooltip title. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
+| `trigger` | string | `'hover focus'` | How tooltip is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the tooltip will be triggered programmatically via the `.tooltip('show')`, `.tooltip('hide')` and `.tooltip('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |
+
+
+
+#### Data attributes for individual tooltips
+
+Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.
+
+
+#### Using function with `popperConfig`
+
+```js
+const tooltip = new bootstrap.Tooltip(element, {
+ popperConfig(defaultBsPopperConfig) {
+ // const newPopperConfig = {...}
+ // use defaultBsPopperConfig if needed...
+ // return newPopperConfig
+ }
+})
+```
+
+### Methods
+
+
+
+
+| Method | Description |
+| --- | --- |
+| `disable` | Removes the ability for an element’s tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled. |
+| `dispose` | Hides and destroys an element’s tooltip (Removes stored data on the DOM element). Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. |
+| `enable` | Gives an element’s tooltip the ability to be shown. **Tooltips are enabled by default.** |
+| `getInstance` | *Static* method which allows you to get the tooltip instance associated with a DOM element. |
+| `getOrCreateInstance` | *Static* method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn’t initialized. |
+| `hide` | Hides an element’s tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a “manual” triggering of the tooltip. |
+| `setContent` | Gives a way to change the tooltip’s content after its initialization. |
+| `show` | Reveals an element’s tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a “manual” triggering of the tooltip. Tooltips with zero-length titles are never displayed. |
+| `toggle` | Toggles an element’s tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a “manual” triggering of the tooltip. |
+| `toggleEnabled` | Toggles the ability for an element’s tooltip to be shown or hidden. |
+| `update` | Updates the position of an element’s tooltip. |
+
+
+```js
+const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance
+
+// setContent example
+tooltip.setContent({ '.tooltip-inner': 'another title' })
+```
+
+
+The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the tooltip template, and each related property-value can be `string` | `element` | `function` | `null`
+
+
+### Events
+
+
+| Event | Description |
+| --- | --- |
+| `hide.bs.tooltip` | This event is fired immediately when the `hide` instance method has been called. |
+| `hidden.bs.tooltip` | This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete). |
+| `inserted.bs.tooltip` | This event is fired after the `show.bs.tooltip` event when the tooltip template has been added to the DOM. |
+| `show.bs.tooltip` | This event fires immediately when the `show` instance method is called. |
+| `shown.bs.tooltip` | This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete). |
+
+
+```js
+const myTooltipEl = document.getElementById('myTooltip')
+const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)
+
+myTooltipEl.addEventListener('hidden.bs.tooltip', () => {
+ // do something...
+})
+
+tooltip.hide()
+```
diff --git a/site/src/content/docs/content/figures.mdx b/site/src/content/docs/content/figures.mdx
new file mode 100644
index 000000000000..31cb30f42fcd
--- /dev/null
+++ b/site/src/content/docs/content/figures.mdx
@@ -0,0 +1,27 @@
+---
+title: Figures
+description: Documentation and examples for displaying related images and text with the figure component in Bootstrap.
+toc: true
+---
+
+Anytime you need to display a piece of content—like an image with an optional caption, consider using a ``.
+
+Use the included `.figure`, `.figure-img` and `.figure-caption` classes to provide some baseline styles for the HTML5 `` and `` elements. Images in figures have no explicit size, so be sure to add the `.img-fluid` class to your `` to make it responsive.
+
+
+
+ A caption for the above image.
+ `} />
+
+Aligning the figure’s caption is easy with our [text utilities]([[docsref:/utilities/text#text-alignment]]).
+
+
+
+ A caption for the above image.
+ `} />
+
+## CSS
+
+### Sass variables
+
+
diff --git a/site/src/content/docs/content/images.mdx b/site/src/content/docs/content/images.mdx
new file mode 100644
index 000000000000..61cc42d64b85
--- /dev/null
+++ b/site/src/content/docs/content/images.mdx
@@ -0,0 +1,51 @@
+---
+title: Images
+description: Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them—all via classes.
+toc: true
+---
+
+## Responsive images
+
+Images in Bootstrap are made responsive with `.img-fluid`. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales with the parent width.
+
+`} />
+
+## Image thumbnails
+
+In addition to our [border-radius utilities]([[docsref:/utilities/borders]]), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
+
+`} />
+
+## Aligning images
+
+Align images with the [helper float classes]([[docsref:/utilities/float]]) or [text alignment classes]([[docsref:/utilities/text#text-alignment]]). `block`-level images can be centered using [the `.mx-auto` margin utility class]([[docsref:/utilities/spacing#horizontal-centering]]).
+
+
+`} />
+
+
+`} />
+
+
+
+
`} />
+
+
+## Picture
+
+If you are using the `` element to specify multiple `` elements for a specific ``, make sure to add the `.img-*` classes to the `` and not to the `` tag.
+
+```html
+
+
+
+
+```
+
+## CSS
+
+### Sass variables
+
+Variables are available for image thumbnails.
+
+
diff --git a/site/content/docs/4.3/content/reboot.md b/site/src/content/docs/content/reboot.mdx
similarity index 52%
rename from site/content/docs/4.3/content/reboot.md
rename to site/src/content/docs/content/reboot.mdx
index 391d5d423bed..8d63ae34e7fe 100644
--- a/site/content/docs/4.3/content/reboot.md
+++ b/site/src/content/docs/content/reboot.mdx
@@ -1,9 +1,7 @@
---
-layout: docs
title: Reboot
description: Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.
-group: content
-aliases: "/docs/4.3/content/"
+aliases: "/docs/[[config:docs_version]]/content/"
toc: true
---
@@ -18,6 +16,28 @@ Here are our guidelines and reasons for choosing what to override in Reboot:
- For easier scaling across device sizes, block elements should use `rem`s for `margin`s.
- Keep declarations of `font`-related properties to a minimum, using `inherit` whenever possible.
+## CSS variables
+
+
+
+With v5.1.1, we standardized our required `@import`s across all our CSS bundles (including `bootstrap.css`, `bootstrap-reboot.css`, and `bootstrap-grid.css`) to include `_root.scss`. This adds `:root` level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately Bootstrap 5 will continue to see more [CSS variables]([[docsref:/customize/css-variables]]) added over time, in order to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don’t use CSS variables, you still have all the power of Sass. **This is still in-progress and will take time to fully implement.**
+
+For example, consider these `:root` CSS variables for common `` styles:
+
+
+
+In practice, those variables are then applied in Reboot like so:
+
+
+
+Which allows you to make real-time customizations however you like:
+
+```html
+
+
+
+```
+
## Page defaults
The `` and `` elements are updated to provide better page-wide defaults. More specifically:
@@ -29,105 +49,100 @@ The `` and `` elements are updated to provide better page-wide defau
## Native font stack
-The default web fonts (Helvetica Neue, Helvetica, and Arial) have been dropped in Bootstrap 4 and replaced with a "native font stack" for optimum text rendering on every device and OS. Read more about [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/).
+Bootstrap utilizes a “native font stack” or “system font stack” for optimum text rendering on every device and OS. These system fonts have been designed specifically with today’s devices in mind, with improved rendering on screens, variable font support, and more. Read more about [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/).
-{{< highlight scss >}}
+```scss
$font-family-sans-serif:
+ // Cross-platform generic font family (default user interface font)
+ system-ui,
// Safari for macOS and iOS (San Francisco)
-apple-system,
- // Chrome < 56 for macOS (San Francisco)
- BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
- "Roboto",
+ Roboto,
+ // older macOS and iOS
+ "Helvetica Neue",
+ // Linux
+ "Noto Sans",
+ "Liberation Sans",
// Basic web fallback
- "Helvetica Neue", Arial, sans-serif,
+ Arial,
+ // Sans serif fallback
+ sans-serif,
// Emoji fonts
- "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
-{{< /highlight >}}
+ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+```
+
+Note that because the font stack includes emoji fonts, many common symbol/dingbat Unicode characters will be rendered as multicolored pictographs. Their appearance will vary, depending on the style used in the browser/platform’s native emoji font, and they won’t be affected by any CSS `color` styles.
This `font-family` is applied to the `` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap.
-## Headings and paragraphs
-
-All heading elements—e.g., `
`—and `
` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing.
-
-
-
-
-
Heading
-
Example
-
-
-
-
-
- {{< markdown >}}``{{< /markdown >}}
-
-
h1. Bootstrap heading
-
-
-
- {{< markdown >}}``{{< /markdown >}}
-
-
h2. Bootstrap heading
-
-
-
- {{< markdown >}}``{{< /markdown >}}
-
-
h3. Bootstrap heading
-
-
-
- {{< markdown >}}``{{< /markdown >}}
-
-
h4. Bootstrap heading
-
-
-
- {{< markdown >}}``{{< /markdown >}}
-
-
h5. Bootstrap heading
-
-
-
- {{< markdown >}}``{{< /markdown >}}
-
-
h6. Bootstrap heading
-
-
-
+## Headings
+
+All heading elements—`
`—`
` have their `margin-top` removed, `margin-bottom: .5rem` set, and `line-height` tightened. While headings inherit their `color` by default, you can also override it via optional CSS variable, `--bs-heading-color`.
+
+
+| Heading | Example |
+| --- | --- |
+| `` | h1. Bootstrap heading |
+| `` | h2. Bootstrap heading |
+| `` | h3. Bootstrap heading |
+| `` | h4. Bootstrap heading |
+| `` | h5. Bootstrap heading |
+| `` | h6. Bootstrap heading |
+
+
+## Paragraphs
+
+All `
` elements have their `margin-top` removed and `margin-bottom: 1rem` set for easy spacing.
+
+This is an example paragraph.
`} />
+
+## Links
+
+Links have a default `color` and underline applied. While links change on `:hover`, they don’t change based on whether someone `:visited` the link. They also receive no special `:focus` styles.
+
+This is an example link`} />
+
+As of v5.3.x, link `color` is set using `rgba()` and new `-rgb` CSS variables, allowing for easy customization of link color opacity. Change the link color opacity with the `--bs-link-opacity` CSS variable:
+
+This is an example link`} />
+
+
+Placeholder links—those without an `href`—are targeted with a more specific selector and have their `color` and `text-decoration` reset to their default values.
+
+This is a placeholder link`} />
+
+## Horizontal rules
+
+The `` element has been simplified. Similar to browser defaults, ``s are styled via `border-top`, have a default `opacity: .25`, and automatically inherit their `border-color` via `color`, including when `color` is set via the parent. They can be modified with text, border, and opacity utilities.
+
+
+
+
+
+
+
+
+ `} />
## Lists
-All lists—`
`, ``, and `
`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`. We've also reset the `padding-left` on `
` and `` elements.
+All lists—`
`, ``, and `
`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`. We’ve also reset the `padding-left` on `
` and `` elements.
-{{< markdown >}}
-* Lorem ipsum dolor sit amet
-* Consectetur adipiscing elit
-* Integer molestie lorem at massa
-* Facilisis in pretium nisl aliquet
-* Nulla volutpat aliquam velit
- * Phasellus iaculis neque
- * Purus sodales ultricies
- * Vestibulum laoreet porttitor sem
- * Ac tristique libero volutpat at
-* Faucibus porta lacus fringilla vel
-* Aenean sit amet erat nunc
-* Eget porttitor lorem
-
-1. Lorem ipsum dolor sit amet
-2. Consectetur adipiscing elit
-3. Integer molestie lorem at massa
-4. Facilisis in pretium nisl aliquet
-5. Nulla volutpat aliquam velit
-6. Faucibus porta lacus fringilla vel
-7. Aenean sit amet erat nunc
-8. Eget porttitor lorem
-{{< /markdown >}}
+* All lists have their top margin removed
+* And their bottom margin normalized
+* Nested lists have no bottom margin
+ * This way they have a more even appearance
+ * Particularly when followed by more list items
+* The left padding has also been reset
+
+1. Here’s an ordered list
+2. With a few list items
+3. It has the same overall look
+4. As the previous unordered list
For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `
`s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `
`s are **bolded**.
@@ -136,11 +151,11 @@ For simpler styling, clear hierarchy, and better spacing, description lists have
Description lists
A description list is perfect for defining terms.
-
Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
-
Donec id elit non mi porta gravida at eget metus.
-
Malesuada porta
-
Etiam porta sem malesuada magna mollis euismod.
+
Term
+
Definition for the term.
+
A second definition for the same term.
+
Another term
+
Definition for this other term.
@@ -148,51 +163,40 @@ For simpler styling, clear hierarchy, and better spacing, description lists have
Wrap inline snippets of code with ``. Be sure to escape HTML angle brackets.
-{{< example >}}
-For example, <section> should be wrapped as inline.
-{{< /example >}}
+<section> should be wrapped as inline.`} />
## Code blocks
Use `
`s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. The `
` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`.
-{{< example >}}
-
<p>Sample text here...</p>
+<p>Sample text here...</p>
<p>And another line of sample text here...</p>
-
-{{< /example >}}
+
`} />
## Variables
For indicating variables use the `` tag.
-{{< example >}}
-y = mx + b
-{{< /example >}}
+y = mx + b`} />
## User input
Use the `` to indicate input that is typically entered via keyboard.
-{{< example >}}
-To switch directories, type cd followed by the name of the directory.
-To edit settings, press ctrl + ,
-{{< /example >}}
+cd followed by the name of the directory.
+To edit settings, press Ctrl + ,`} />
## Sample output
For indicating sample output from a program use the `` tag.
-{{< example >}}
-This text is meant to be treated as sample output from a computer program.
-{{< /example >}}
+This text is meant to be treated as sample output from a computer program.`} />
## Tables
-Tables are slightly adjusted to style `
`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{< docsref "/content/tables" >}}).
+Tables are slightly adjusted to style `
`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]([[docsref:/content/tables]]).
-
-
+
This is an example table, and this is its caption to describe the contents.
@@ -224,8 +228,7 @@ Tables are slightly adjusted to style `
`s, collapse borders, and ensure
Table cell
-
-
+ `} />
## Forms
@@ -235,55 +238,48 @@ Various form elements have been rebooted for simpler base styles. Here are some
- `
+ 
+ 
+
-## Backers
-
-Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/bootstrap#backer)]
-
-[](https://opencollective.com/bootstrap#backers)
+Thanks to [Netlify](https://www.netlify.com/) for providing us with Deploy Previews!
## Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/bootstrap#sponsor)]
-[](https://opencollective.com/bootstrap/sponsor/0/website)
-[](https://opencollective.com/bootstrap/sponsor/1/website)
-[](https://opencollective.com/bootstrap/sponsor/2/website)
-[](https://opencollective.com/bootstrap/sponsor/3/website)
-[](https://opencollective.com/bootstrap/sponsor/4/website)
-[](https://opencollective.com/bootstrap/sponsor/5/website)
-[](https://opencollective.com/bootstrap/sponsor/6/website)
-[](https://opencollective.com/bootstrap/sponsor/7/website)
-[](https://opencollective.com/bootstrap/sponsor/8/website)
-[](https://opencollective.com/bootstrap/sponsor/9/website)
+[](https://opencollective.com/bootstrap/sponsor/0/website)
+[](https://opencollective.com/bootstrap/sponsor/1/website)
+[](https://opencollective.com/bootstrap/sponsor/2/website)
+[](https://opencollective.com/bootstrap/sponsor/3/website)
+[](https://opencollective.com/bootstrap/sponsor/4/website)
+[](https://opencollective.com/bootstrap/sponsor/5/website)
+[](https://opencollective.com/bootstrap/sponsor/6/website)
+[](https://opencollective.com/bootstrap/sponsor/7/website)
+[](https://opencollective.com/bootstrap/sponsor/8/website)
+[](https://opencollective.com/bootstrap/sponsor/9/website)
+
+
+## Backers
+
+Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/bootstrap#backer)]
+
+[](https://opencollective.com/bootstrap#backers)
## Copyright and license
-Code and documentation copyright 2011-2019 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors) and [Twitter, Inc.](https://twitter.com) Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/master/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
+Code and documentation copyright 2011-2025 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors). Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
diff --git a/build/.eslintrc.json b/build/.eslintrc.json
deleted file mode 100644
index 08169ca4cca8..000000000000
--- a/build/.eslintrc.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "env": {
- "browser": false,
- "node": true
- },
- "parserOptions": {
- "sourceType": "script"
- },
- "extends": "../.eslintrc.json",
- "rules": {
- "no-console": "off"
- }
-}
diff --git a/build/banner.js b/build/banner.js
deleted file mode 100644
index 453fc3b6e0b2..000000000000
--- a/build/banner.js
+++ /dev/null
@@ -1,14 +0,0 @@
-'use strict'
-
-const pkg = require('../package.json')
-const year = new Date().getFullYear()
-
-function getBanner(pluginFilename) {
- return `/*!
- * Bootstrap${pluginFilename ? ` ${pluginFilename}` : ''} v${pkg.version} (${pkg.homepage})
- * Copyright 2011-${year} ${pkg.author}
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */`
-}
-
-module.exports = getBanner
diff --git a/build/banner.mjs b/build/banner.mjs
new file mode 100644
index 000000000000..3fea93c8f1d2
--- /dev/null
+++ b/build/banner.mjs
@@ -0,0 +1,20 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const pkgJson = path.join(__dirname, '../package.json')
+const pkg = JSON.parse(await fs.readFile(pkgJson, 'utf8'))
+
+const year = new Date().getFullYear()
+
+function getBanner(pluginFilename) {
+ return `/*!
+ * Bootstrap${pluginFilename ? ` ${pluginFilename}` : ''} v${pkg.version} (${pkg.homepage})
+ * Copyright 2011-${year} ${pkg.author}
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */`
+}
+
+export default getBanner
diff --git a/build/build-plugins.js b/build/build-plugins.js
deleted file mode 100644
index bf64021de343..000000000000
--- a/build/build-plugins.js
+++ /dev/null
@@ -1,183 +0,0 @@
-/*!
- * Script to build our plugins to use them separately.
- * Copyright 2019 The Bootstrap Authors
- * Copyright 2019 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
-
-'use strict'
-
-const path = require('path')
-const rollup = require('rollup')
-const babel = require('rollup-plugin-babel')
-const banner = require('./banner.js')
-
-const plugins = [
- babel({
- // Only transpile our source code
- exclude: 'node_modules/**',
- // Include only required helpers
- externalHelpersWhitelist: [
- 'defineProperties',
- 'createClass',
- 'inheritsLoose',
- 'defineProperty',
- 'objectSpread2'
- ]
- })
-]
-const bsPlugins = {
- Data: path.resolve(__dirname, '../js/src/dom/data.js'),
- EventHandler: path.resolve(__dirname, '../js/src/dom/event-handler.js'),
- Manipulator: path.resolve(__dirname, '../js/src/dom/manipulator.js'),
- Polyfill: path.resolve(__dirname, '../js/src/dom/polyfill.js'),
- SelectorEngine: path.resolve(__dirname, '../js/src/dom/selector-engine.js'),
- Alert: path.resolve(__dirname, '../js/src/alert.js'),
- Button: path.resolve(__dirname, '../js/src/button.js'),
- Carousel: path.resolve(__dirname, '../js/src/carousel.js'),
- Collapse: path.resolve(__dirname, '../js/src/collapse.js'),
- Dropdown: path.resolve(__dirname, '../js/src/dropdown.js'),
- Modal: path.resolve(__dirname, '../js/src/modal.js'),
- Popover: path.resolve(__dirname, '../js/src/popover.js'),
- ScrollSpy: path.resolve(__dirname, '../js/src/scrollspy.js'),
- Tab: path.resolve(__dirname, '../js/src/tab.js'),
- Toast: path.resolve(__dirname, '../js/src/toast.js'),
- Tooltip: path.resolve(__dirname, '../js/src/tooltip.js')
-}
-const rootPath = path.resolve(__dirname, '../js/dist/')
-
-const defaultPluginConfig = {
- external: [
- bsPlugins.Data,
- bsPlugins.EventHandler,
- bsPlugins.SelectorEngine
- ],
- globals: {
- [bsPlugins.Data]: 'Data',
- [bsPlugins.EventHandler]: 'EventHandler',
- [bsPlugins.SelectorEngine]: 'SelectorEngine'
- }
-}
-
-function getConfigByPluginKey(pluginKey) {
- if (
- pluginKey === 'Data' ||
- pluginKey === 'Manipulator' ||
- pluginKey === 'EventHandler' ||
- pluginKey === 'Polyfill' ||
- pluginKey === 'SelectorEngine' ||
- pluginKey === 'Util' ||
- pluginKey === 'Sanitizer'
- ) {
- return {
- external: [bsPlugins.Polyfill],
- globals: {
- [bsPlugins.Polyfill]: 'Polyfill'
- }
- }
- }
-
- if (pluginKey === 'Alert' || pluginKey === 'Tab') {
- return defaultPluginConfig
- }
-
- if (
- pluginKey === 'Button' ||
- pluginKey === 'Carousel' ||
- pluginKey === 'Collapse' ||
- pluginKey === 'Modal' ||
- pluginKey === 'ScrollSpy'
- ) {
- const config = Object.assign(defaultPluginConfig)
- config.external.push(bsPlugins.Manipulator)
- config.globals[bsPlugins.Manipulator] = 'Manipulator'
- return config
- }
-
- if (pluginKey === 'Dropdown' || pluginKey === 'Tooltip') {
- const config = Object.assign(defaultPluginConfig)
- config.external.push(bsPlugins.Manipulator, 'popper.js')
- config.globals[bsPlugins.Manipulator] = 'Manipulator'
- config.globals['popper.js'] = 'Popper'
- return config
- }
-
- if (pluginKey === 'Popover') {
- return {
- external: [
- bsPlugins.Data,
- bsPlugins.SelectorEngine,
- bsPlugins.Tooltip
- ],
- globals: {
- [bsPlugins.Data]: 'Data',
- [bsPlugins.SelectorEngine]: 'SelectorEngine',
- [bsPlugins.Tooltip]: 'Tooltip'
- }
- }
- }
-
- if (pluginKey === 'Toast') {
- return {
- external: [
- bsPlugins.Data,
- bsPlugins.EventHandler,
- bsPlugins.Manipulator
- ],
- globals: {
- [bsPlugins.Data]: 'Data',
- [bsPlugins.EventHandler]: 'EventHandler',
- [bsPlugins.Manipulator]: 'Manipulator'
- }
- }
- }
-}
-
-const utilObjects = [
- 'Util',
- 'Sanitizer'
-]
-
-const domObjects = [
- 'Data',
- 'EventHandler',
- 'Manipulator',
- 'Polyfill',
- 'SelectorEngine'
-]
-
-function build(plugin) {
- console.log(`Building ${plugin} plugin...`)
-
- const { external, globals } = getConfigByPluginKey(plugin)
- const pluginFilename = path.basename(bsPlugins[plugin])
- let pluginPath = rootPath
-
- if (utilObjects.includes(plugin)) {
- pluginPath = `${rootPath}/util/`
- }
-
- if (domObjects.includes(plugin)) {
- pluginPath = `${rootPath}/dom/`
- }
-
- rollup.rollup({
- input: bsPlugins[plugin],
- plugins,
- external
- }).then(bundle => {
- bundle.write({
- banner: banner(pluginFilename),
- format: 'umd',
- name: plugin,
- sourcemap: true,
- globals,
- file: path.resolve(__dirname, `${pluginPath}/${pluginFilename}`)
- })
- .then(() => console.log(`Building ${plugin} plugin... Done!`))
- .catch(error => console.error(`${plugin}: ${error}`))
- })
-}
-
-Object.keys(bsPlugins)
- .forEach(plugin => build(plugin))
diff --git a/build/build-plugins.mjs b/build/build-plugins.mjs
new file mode 100644
index 000000000000..f56cd213f511
--- /dev/null
+++ b/build/build-plugins.mjs
@@ -0,0 +1,108 @@
+#!/usr/bin/env node
+
+/*!
+ * Script to build our plugins to use them separately.
+ * Copyright 2020-2025 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { babel } from '@rollup/plugin-babel'
+import { globby } from 'globby'
+import { rollup } from 'rollup'
+import banner from './banner.mjs'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const sourcePath = path.resolve(__dirname, '../js/src/').replace(/\\/g, '/')
+const jsFiles = await globby(`${sourcePath}/**/*.js`)
+
+// Array which holds the resolved plugins
+const resolvedPlugins = []
+
+// Trims the "js" extension and uppercases => first letter, hyphens, backslashes & slashes
+const filenameToEntity = filename => filename.replace('.js', '')
+ .replace(/(?:^|-|\/|\\)[a-z]/g, str => str.slice(-1).toUpperCase())
+
+for (const file of jsFiles) {
+ resolvedPlugins.push({
+ src: file,
+ dist: file.replace('src', 'dist'),
+ fileName: path.basename(file),
+ className: filenameToEntity(path.basename(file))
+ // safeClassName: filenameToEntity(path.relative(sourcePath, file))
+ })
+}
+
+const build = async plugin => {
+ /**
+ * @type {import('rollup').GlobalsOption}
+ */
+ const globals = {}
+
+ const bundle = await rollup({
+ input: plugin.src,
+ plugins: [
+ babel({
+ // Only transpile our source code
+ exclude: 'node_modules/**',
+ // Include the helpers in each file, at most one copy of each
+ babelHelpers: 'bundled'
+ })
+ ],
+ external(source) {
+ // Pattern to identify local files
+ const pattern = /^(\.{1,2})\//
+
+ // It's not a local file, e.g a Node.js package
+ if (!pattern.test(source)) {
+ globals[source] = source
+ return true
+ }
+
+ const usedPlugin = resolvedPlugins.find(plugin => {
+ return plugin.src.includes(source.replace(pattern, ''))
+ })
+
+ if (!usedPlugin) {
+ throw new Error(`Source ${source} is not mapped!`)
+ }
+
+ // We can change `Index` with `UtilIndex` etc if we use
+ // `safeClassName` instead of `className` everywhere
+ globals[path.normalize(usedPlugin.src)] = usedPlugin.className
+ return true
+ }
+ })
+
+ await bundle.write({
+ banner: banner(plugin.fileName),
+ format: 'umd',
+ name: plugin.className,
+ sourcemap: true,
+ globals,
+ generatedCode: 'es2015',
+ file: plugin.dist
+ })
+
+ console.log(`Built ${plugin.className}`)
+}
+
+(async () => {
+ try {
+ const basename = path.basename(__filename)
+ const timeLabel = `[${basename}] finished`
+
+ console.log('Building individual plugins...')
+ console.time(timeLabel)
+
+ await Promise.all(Object.values(resolvedPlugins).map(plugin => build(plugin)))
+
+ console.timeEnd(timeLabel)
+ } catch (error) {
+ console.error(error)
+ process.exit(1)
+ }
+})()
diff --git a/build/change-version.js b/build/change-version.js
deleted file mode 100755
index 8b349a68ad5d..000000000000
--- a/build/change-version.js
+++ /dev/null
@@ -1,112 +0,0 @@
-#!/usr/bin/env node
-
-/*!
- * Script to update version number references in the project.
- * Copyright 2017-2019 The Bootstrap Authors
- * Copyright 2017-2019 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
-
-'use strict'
-
-const fs = require('fs')
-const path = require('path')
-const sh = require('shelljs')
-
-sh.config.fatal = true
-
-// Blame TC39... https://github.com/benjamingr/RegExp.escape/issues/37
-function regExpQuote(string) {
- return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
-}
-
-function regExpQuoteReplacement(string) {
- return string.replace(/[$]/g, '$$')
-}
-
-const DRY_RUN = false
-
-function walkAsync(directory, excludedDirectories, fileCallback, errback) {
- if (excludedDirectories.has(path.parse(directory).base)) {
- return
- }
-
- fs.readdir(directory, (err, names) => {
- if (err) {
- errback(err)
- return
- }
-
- names.forEach(name => {
- const filepath = path.join(directory, name)
- fs.lstat(filepath, (err, stats) => {
- if (err) {
- process.nextTick(errback, err)
- return
- }
-
- if (stats.isDirectory()) {
- process.nextTick(walkAsync, filepath, excludedDirectories, fileCallback, errback)
- } else if (stats.isFile()) {
- process.nextTick(fileCallback, filepath)
- }
- })
- })
- })
-}
-
-function replaceRecursively(directory, excludedDirectories, allowedExtensions, original, replacement) {
- original = new RegExp(regExpQuote(original), 'g')
- replacement = regExpQuoteReplacement(replacement)
- const updateFile = DRY_RUN ?
- filepath => {
- if (allowedExtensions.has(path.parse(filepath).ext)) {
- console.log(`FILE: ${filepath}`)
- } else {
- console.log(`EXCLUDED:${filepath}`)
- }
- } :
- filepath => {
- if (allowedExtensions.has(path.parse(filepath).ext)) {
- sh.sed('-i', original, replacement, filepath)
- }
- }
-
- walkAsync(directory, excludedDirectories, updateFile, err => {
- console.error('ERROR while traversing directory!:')
- console.error(err)
- process.exit(1)
- })
-}
-
-function main(args) {
- if (args.length !== 2) {
- console.error('USAGE: change-version old_version new_version')
- console.error('Got arguments:', args)
- process.exit(1)
- }
-
- const oldVersion = args[0]
- const newVersion = args[1]
- const EXCLUDED_DIRS = new Set([
- '.git',
- '_gh_pages',
- 'node_modules',
- 'vendor'
- ])
- const INCLUDED_EXTENSIONS = new Set([
- // This extension whitelist is how we avoid modifying binary files
- '',
- '.css',
- '.html',
- '.js',
- '.json',
- '.md',
- '.scss',
- '.txt',
- '.yml'
- ])
- replaceRecursively('.', EXCLUDED_DIRS, INCLUDED_EXTENSIONS, oldVersion, newVersion)
-}
-
-main(process.argv.slice(2))
diff --git a/build/change-version.mjs b/build/change-version.mjs
new file mode 100644
index 000000000000..1400274c446e
--- /dev/null
+++ b/build/change-version.mjs
@@ -0,0 +1,113 @@
+#!/usr/bin/env node
+
+/*!
+ * Script to update version number references in the project.
+ * Copyright 2017-2025 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+
+import { execFile } from 'node:child_process'
+import fs from 'node:fs/promises'
+import process from 'node:process'
+
+const VERBOSE = process.argv.includes('--verbose')
+const DRY_RUN = process.argv.includes('--dry') || process.argv.includes('--dry-run')
+
+// These are the files we only care about replacing the version
+const FILES = [
+ 'README.md',
+ 'config.yml',
+ 'js/src/base-component.js',
+ 'package.js',
+ 'scss/mixins/_banner.scss',
+ 'site/data/docs-versions.yml'
+]
+
+// Blame TC39... https://github.com/benjamingr/RegExp.escape/issues/37
+function regExpQuote(string) {
+ return string.replace(/[$()*+-.?[\\\]^{|}]/g, '\\$&')
+}
+
+function regExpQuoteReplacement(string) {
+ return string.replace(/\$/g, '$$')
+}
+
+async function replaceRecursively(file, oldVersion, newVersion) {
+ const originalString = await fs.readFile(file, 'utf8')
+ const newString = originalString
+ .replace(
+ new RegExp(regExpQuote(oldVersion), 'g'),
+ regExpQuoteReplacement(newVersion)
+ )
+ // Also replace the version used by the rubygem,
+ // which is using periods (`.`) instead of hyphens (`-`)
+ .replace(
+ new RegExp(regExpQuote(oldVersion.replace(/-/g, '.')), 'g'),
+ regExpQuoteReplacement(newVersion.replace(/-/g, '.'))
+ )
+
+ // No need to move any further if the strings are identical
+ if (originalString === newString) {
+ return
+ }
+
+ if (VERBOSE) {
+ console.log(`Found ${oldVersion} in ${file}`)
+ }
+
+ if (DRY_RUN) {
+ return
+ }
+
+ await fs.writeFile(file, newString, 'utf8')
+}
+
+function bumpNpmVersion(newVersion) {
+ if (DRY_RUN) {
+ return
+ }
+
+ execFile('npm', ['version', newVersion, '--no-git-tag'], { shell: true }, error => {
+ if (error) {
+ console.error(error)
+ process.exit(1)
+ }
+ })
+}
+
+function showUsage(args) {
+ console.error('USAGE: change-version old_version new_version [--verbose] [--dry[-run]]')
+ console.error('Got arguments:', args)
+ process.exit(1)
+}
+
+async function main(args) {
+ let [oldVersion, newVersion] = args
+
+ if (!oldVersion || !newVersion) {
+ showUsage(args)
+ }
+
+ // Strip any leading `v` from arguments because
+ // otherwise we will end up with duplicate `v`s
+ [oldVersion, newVersion] = [oldVersion, newVersion].map(arg => {
+ return arg.startsWith('v') ? arg.slice(1) : arg
+ })
+
+ if (oldVersion === newVersion) {
+ showUsage(args)
+ }
+
+ bumpNpmVersion(newVersion)
+
+ try {
+ await Promise.all(
+ FILES.map(file => replaceRecursively(file, oldVersion, newVersion))
+ )
+ } catch (error) {
+ console.error(error)
+ process.exit(1)
+ }
+}
+
+main(process.argv.slice(2))
diff --git a/build/generate-sri.js b/build/generate-sri.js
deleted file mode 100644
index 267419dda004..000000000000
--- a/build/generate-sri.js
+++ /dev/null
@@ -1,60 +0,0 @@
-#!/usr/bin/env node
-
-/*!
- * Script to generate SRI hashes for use in our docs.
- * Remember to use the same vendor files as the CDN ones,
- * otherwise the hashes won't match!
- *
- * Copyright 2017-2019 The Bootstrap Authors
- * Copyright 2017-2019 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
-
-'use strict'
-
-const crypto = require('crypto')
-const fs = require('fs')
-const path = require('path')
-const sh = require('shelljs')
-
-sh.config.fatal = true
-
-const configFile = path.join(__dirname, '../config.yml')
-
-// Array of objects which holds the files to generate SRI hashes for.
-// `file` is the path from the root folder
-// `configPropertyName` is the config.yml variable's name of the file
-const files = [
- {
- file: 'dist/css/bootstrap.min.css',
- configPropertyName: 'css_hash'
- },
- {
- file: 'dist/js/bootstrap.min.js',
- configPropertyName: 'js_hash'
- },
- {
- file: 'dist/js/bootstrap.bundle.min.js',
- configPropertyName: 'js_bundle_hash'
- },
- {
- file: 'node_modules/popper.js/dist/umd/popper.min.js',
- configPropertyName: 'popper_hash'
- }
-]
-
-files.forEach(file => {
- fs.readFile(file.file, 'utf8', (err, data) => {
- if (err) {
- throw err
- }
-
- const algo = 'sha384'
- const hash = crypto.createHash(algo).update(data, 'utf8').digest('base64')
- const integrity = `${algo}-${hash}`
-
- console.log(`${file.configPropertyName}: ${integrity}`)
-
- sh.sed('-i', new RegExp(`(\\s${file.configPropertyName}:\\s+"|')(\\S+)("|')`), `$1${integrity}$3`, configFile)
- })
-})
diff --git a/build/generate-sri.mjs b/build/generate-sri.mjs
new file mode 100644
index 000000000000..5622843f3479
--- /dev/null
+++ b/build/generate-sri.mjs
@@ -0,0 +1,64 @@
+#!/usr/bin/env node
+
+/*!
+ * Script to generate SRI hashes for use in our docs.
+ * Remember to use the same vendor files as the CDN ones,
+ * otherwise the hashes won't match!
+ *
+ * Copyright 2017-2025 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+
+import crypto from 'node:crypto'
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import sh from 'shelljs'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+sh.config.fatal = true
+
+const configFile = path.join(__dirname, '../config.yml')
+
+// Array of objects which holds the files to generate SRI hashes for.
+// `file` is the path from the root folder
+// `configPropertyName` is the config.yml variable's name of the file
+const files = [
+ {
+ file: 'dist/css/bootstrap.min.css',
+ configPropertyName: 'css_hash'
+ },
+ {
+ file: 'dist/css/bootstrap.rtl.min.css',
+ configPropertyName: 'css_rtl_hash'
+ },
+ {
+ file: 'dist/js/bootstrap.min.js',
+ configPropertyName: 'js_hash'
+ },
+ {
+ file: 'dist/js/bootstrap.bundle.min.js',
+ configPropertyName: 'js_bundle_hash'
+ },
+ {
+ file: 'node_modules/@popperjs/core/dist/umd/popper.min.js',
+ configPropertyName: 'popper_hash'
+ }
+]
+
+for (const { file, configPropertyName } of files) {
+ fs.readFile(file, 'utf8', (error, data) => {
+ if (error) {
+ throw error
+ }
+
+ const algorithm = 'sha384'
+ const hash = crypto.createHash(algorithm).update(data, 'utf8').digest('base64')
+ const integrity = `${algorithm}-${hash}`
+
+ console.log(`${configPropertyName}: ${integrity}`)
+
+ sh.sed('-i', new RegExp(`^(\\s+${configPropertyName}:\\s+["'])\\S*(["'])`), `$1${integrity}$2`, configFile)
+ })
+}
diff --git a/build/postcss.config.js b/build/postcss.config.js
deleted file mode 100644
index 56b7d94cc1fa..000000000000
--- a/build/postcss.config.js
+++ /dev/null
@@ -1,16 +0,0 @@
-'use strict'
-
-module.exports = ctx => ({
- map: ctx.file.dirname.includes('examples') ?
- false :
- {
- inline: false,
- annotation: true,
- sourcesContent: true
- },
- plugins: {
- autoprefixer: {
- cascade: false
- }
- }
-})
diff --git a/build/postcss.config.mjs b/build/postcss.config.mjs
new file mode 100644
index 000000000000..7717cfc3f1f6
--- /dev/null
+++ b/build/postcss.config.mjs
@@ -0,0 +1,17 @@
+const mapConfig = {
+ inline: false,
+ annotation: true,
+ sourcesContent: true
+}
+
+export default context => {
+ return {
+ map: context.file.dirname.includes('examples') ? false : mapConfig,
+ plugins: {
+ autoprefixer: {
+ cascade: false
+ },
+ rtlcss: context.env === 'RTL'
+ }
+ }
+}
diff --git a/build/rollup.config.js b/build/rollup.config.js
deleted file mode 100644
index 2f0badb3d2c8..000000000000
--- a/build/rollup.config.js
+++ /dev/null
@@ -1,55 +0,0 @@
-'use strict'
-
-const path = require('path')
-const babel = require('rollup-plugin-babel')
-const resolve = require('rollup-plugin-node-resolve')
-const banner = require('./banner.js')
-
-const BUNDLE = process.env.BUNDLE === 'true'
-const ESM = process.env.ESM === 'true'
-
-let fileDest = `bootstrap${ESM ? '.esm' : ''}`
-const external = ['popper.js']
-const plugins = [
- babel({
- // Only transpile our source code
- exclude: 'node_modules/**',
- // Include only required helpers
- externalHelpersWhitelist: [
- 'defineProperties',
- 'createClass',
- 'inheritsLoose',
- 'defineProperty',
- 'objectSpread2'
- ]
- })
-]
-const globals = {
- 'popper.js': 'Popper'
-}
-
-if (BUNDLE) {
- fileDest += '.bundle'
- // Remove last entry in external array to bundle Popper
- external.pop()
- delete globals['popper.js']
- plugins.push(resolve())
-}
-
-const rollupConfig = {
- input: path.resolve(__dirname, `../js/index.${ESM ? 'esm' : 'umd'}.js`),
- output: {
- banner,
- file: path.resolve(__dirname, `../dist/js/${fileDest}.js`),
- format: ESM ? 'esm' : 'umd',
- globals
- },
- external,
- plugins
-}
-
-if (!ESM) {
- rollupConfig.output.name = 'bootstrap'
-}
-
-module.exports = rollupConfig
diff --git a/build/rollup.config.mjs b/build/rollup.config.mjs
new file mode 100644
index 000000000000..dd6c7d13e66f
--- /dev/null
+++ b/build/rollup.config.mjs
@@ -0,0 +1,59 @@
+import path from 'node:path'
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+import { babel } from '@rollup/plugin-babel'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import replace from '@rollup/plugin-replace'
+import banner from './banner.mjs'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const BUNDLE = process.env.BUNDLE === 'true'
+const ESM = process.env.ESM === 'true'
+
+let destinationFile = `bootstrap${ESM ? '.esm' : ''}`
+const external = ['@popperjs/core']
+const plugins = [
+ babel({
+ // Only transpile our source code
+ exclude: 'node_modules/**',
+ // Include the helpers in the bundle, at most one copy of each
+ babelHelpers: 'bundled'
+ })
+]
+const globals = {
+ '@popperjs/core': 'Popper'
+}
+
+if (BUNDLE) {
+ destinationFile += '.bundle'
+ // Remove last entry in external array to bundle Popper
+ external.pop()
+ delete globals['@popperjs/core']
+ plugins.push(
+ replace({
+ 'process.env.NODE_ENV': '"production"',
+ preventAssignment: true
+ }),
+ nodeResolve()
+ )
+}
+
+const rollupConfig = {
+ input: path.resolve(__dirname, `../js/index.${ESM ? 'esm' : 'umd'}.js`),
+ output: {
+ banner: banner(),
+ file: path.resolve(__dirname, `../dist/js/${destinationFile}.js`),
+ format: ESM ? 'esm' : 'umd',
+ globals,
+ generatedCode: 'es2015'
+ },
+ external,
+ plugins
+}
+
+if (!ESM) {
+ rollupConfig.output.name = 'bootstrap'
+}
+
+export default rollupConfig
diff --git a/build/ship.sh b/build/ship.sh
deleted file mode 100755
index acce9b922885..000000000000
--- a/build/ship.sh
+++ /dev/null
@@ -1,52 +0,0 @@
-#!/usr/bin/env bash
-#
-# Usage
-# ---------------
-# 1. Clone second version of Bootstrap in sibling directory named `bs-docs`.
-# 2. Within `bs-docs` copy, switch to `gh-pages` branch.
-# 3. Pull latest, re-bundle, re-npm.
-# 4. Run script.
-
-red=$'\e[1;31m'
-green=$'\e[1;32m'
-#blue=$'\e[1;34m'
-magenta=$'\e[1;35m'
-#cyan=$'\e[1;36m'
-end=$'\e[0m'
-
-# Get current version from package.json
-current_version=$(node -p "require('./package.json').version")
-
-if [[ $# -lt 1 ]]; then
- printf "\n%s⚠️ Shipping aborted. You must specify a version.\n%s" $red $end
- exit 1
-fi
-
-# Pulling latest changes, just to be sure
-printf "\n%s=======================================================%s" $magenta $end
-printf "\n%sPulling latest changes...%s" $magenta $end
-printf "\n%s=======================================================\n\n%s" $magenta $end
-git pull origin master
-
-# Update version number
-printf "\n%s=======================================================%s" $magenta $end
-printf "\n%sUpdating version number...%s" $magenta $end
-printf "\n%s=======================================================\n%s" $magenta $end
-npm run release-version "$current_version" "$1"
-
-# Build release
-printf "\n%s=======================================================%s" $magenta $end
-printf "\n%sBuilding release...%s" $magenta $end
-printf "\n%s=======================================================\n%s" $magenta $end
-npm run release
-
-# Copy the contents of the built docs site over to `bs-docs` repo
-printf "\n%s=======================================================%s" $magenta $end
-printf "\n%sCopy it over...%s" $magenta $end
-printf "\n%s=======================================================\n%s" $magenta $end
-cp -rf _gh_pages/. ../bs-docs/
-printf "\nDone!\n"
-
-printf "\n%s=======================================================%s" $green $end
-printf "\n%sSuccess, $1 is ready to review and publish.%s" $green $end
-printf "\n%s=======================================================\n\n%s" $green $end
diff --git a/build/svgo.yml b/build/svgo.yml
deleted file mode 100644
index 67940d393ee3..000000000000
--- a/build/svgo.yml
+++ /dev/null
@@ -1,59 +0,0 @@
-# Usage:
-# install svgo globally: `npm i -g svgo`
-# svgo --config=build/svgo.yml --input=foo.svg
-
-# https://github.com/svg/svgo/blob/master/docs/how-it-works/en.md
-# replace default config
-
-multipass: true
-#full: true
-
-# https://github.com/svg/svgo/blob/master/lib/svgo/js2svg.js#L6 for more config options
-
-js2svg:
- pretty: true
- indent: 2
-
-plugins:
-# - addAttributesToSVGElement:
-# attributes:
-# - focusable: false
- - cleanupAttrs: true
- - cleanupEnableBackground: true
- - cleanupIDs: true
- - cleanupListOfValues: true
- - cleanupNumericValues: true
- - collapseGroups: true
- - convertColors: true
- - convertPathData: true
- - convertShapeToPath: true
- - convertStyleToAttrs: true
- - convertTransform: true
- - inlineStyles: true
- - mergePaths: true
- - minifyStyles: true
- - moveElemsAttrsToGroup: true
- - moveGroupAttrsToElems: true
- - removeAttrs:
- attrs:
- - "data-name"
- - removeComments: true
- - removeDesc: true
- - removeDoctype: true
- - removeEditorsNSData: true
- - removeEmptyAttrs: true
- - removeEmptyContainers: true
- - removeEmptyText: true
- - removeHiddenElems: true
- - removeMetadata: true
- - removeNonInheritableGroupAttrs: true
- - removeTitle: false
- - removeUnknownsAndDefaults:
- keepRoleAttr: true
- - removeUnusedNS: true
- - removeUselessDefs: true
- - removeUselessStrokeAndFill: true
- - removeViewBox: false
- - removeXMLNS: false
- - removeXMLProcInst: true
- - sortAttrs: true
diff --git a/build/vnu-jar.js b/build/vnu-jar.js
deleted file mode 100644
index 8c5190dbeabc..000000000000
--- a/build/vnu-jar.js
+++ /dev/null
@@ -1,69 +0,0 @@
-#!/usr/bin/env node
-
-/*!
- * Script to run vnu-jar if Java is available.
- * Copyright 2017-2019 The Bootstrap Authors
- * Copyright 2017-2019 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
-
-'use strict'
-
-const childProcess = require('child_process')
-const vnu = require('vnu-jar')
-
-childProcess.exec('java -version', (error, stdout, stderr) => {
- if (error) {
- console.error('Skipping vnu-jar test; Java is missing.')
- return
- }
-
- const is32bitJava = !stderr.match(/64-Bit/)
-
- // vnu-jar accepts multiple ignores joined with a `|`.
- // Also note that the ignores are regular expressions.
- const ignores = [
- // "autocomplete" is included in
+`} />
+
+You can even roll your own custom sizing with CSS variables:
+
+
+ Bootstrap
+ 11 mins ago
+
+