rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-10 10:29:23 +01:00
Code Issues Actions Packages Releases Activity

Docs: missing aria-hidden on some decorative SVGs (#40756)

Browse Source 
* Docs: missing aria-hidden on some decorative SVGs

* Docs: missing aria-hidden on check mark on docs version dropdown in docs' header

* Docs: missing aria-hidden on check mark on theme toggler dropdown in docs' header

* Docs: missing aria-hidden on position utility example

* Docs: missing aria-hidden on features examples

* Docs: missing aria-hidden

* Docs: missing label on link

* Build(deps-dev): Bump rollup from 4.20.0 to 4.21.1 (#40775)

Bumps [rollup](https://github.com/rollup/rollup) from 4.20.0 to 4.21.1.
- [Release notes](https://github.com/rollup/rollup/releases)
- [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md)
- [Commits](https://github.com/rollup/rollup/compare/v4.20.0...v4.21.1)

---
updated-dependencies:
- dependency-name: rollup
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Build(deps-dev): Bump @babel/preset-env from 7.25.3 to 7.25.4 (#40773)

Bumps [@babel/preset-env](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-env) from 7.25.3 to 7.25.4.
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.25.4/packages/babel-preset-env)

---
updated-dependencies:
- dependency-name: "@babel/preset-env"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Build(deps-dev): Bump hugo-bin from 0.129.1 to 0.130.1 (#40774)

Bumps [hugo-bin](https://github.com/fenneclab/hugo-bin) from 0.129.1 to 0.130.1.
- [Release notes](https://github.com/fenneclab/hugo-bin/releases)
- [Commits](https://github.com/fenneclab/hugo-bin/compare/v0.129.1...v0.130.1)

---
updated-dependencies:
- dependency-name: hugo-bin
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* npm audit fix

* Build(deps-dev): Bump stylelint-config-twbs-bootstrap (#40786)

Bumps [stylelint-config-twbs-bootstrap](https://github.com/twbs/stylelint-config-twbs-bootstrap) from 14.2.0 to 15.0.0.
- [Release notes](https://github.com/twbs/stylelint-config-twbs-bootstrap/releases)
- [Commits](https://github.com/twbs/stylelint-config-twbs-bootstrap/compare/v14.2.0...v15.0.0)

---
updated-dependencies:
- dependency-name: stylelint-config-twbs-bootstrap
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Build(deps-dev): Bump rollup from 4.21.1 to 4.21.2 (#40785)

Bumps [rollup](https://github.com/rollup/rollup) from 4.21.1 to 4.21.2.
- [Release notes](https://github.com/rollup/rollup/releases)
- [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md)
- [Commits](https://github.com/rollup/rollup/compare/v4.21.1...v4.21.2)

---
updated-dependencies:
- dependency-name: rollup
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Build(deps-dev): Bump eslint-plugin-import from 2.29.1 to 2.30.0 (#40783)

Bumps [eslint-plugin-import](https://github.com/import-js/eslint-plugin-import) from 2.29.1 to 2.30.0.
- [Release notes](https://github.com/import-js/eslint-plugin-import/releases)
- [Changelog](https://github.com/import-js/eslint-plugin-import/blob/main/CHANGELOG.md)
- [Commits](https://github.com/import-js/eslint-plugin-import/compare/v2.29.1...v2.30.0)

---
updated-dependencies:
- dependency-name: eslint-plugin-import
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Build(deps-dev): Bump rtlcss from 4.2.0 to 4.3.0 (#40782)

Bumps [rtlcss](https://github.com/MohammadYounes/rtlcss) from 4.2.0 to 4.3.0.
- [Release notes](https://github.com/MohammadYounes/rtlcss/releases)
- [Changelog](https://github.com/MohammadYounes/rtlcss/blob/master/CHANGELOG.md)
- [Commits](https://github.com/MohammadYounes/rtlcss/compare/v4.2.0...v4.3.0)

---
updated-dependencies:
- dependency-name: rtlcss
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Build(deps-dev): Bump @babel/cli from 7.24.8 to 7.25.6 (#40788)

Bumps [@babel/cli](https://github.com/babel/babel/tree/HEAD/packages/babel-cli) from 7.24.8 to 7.25.6.
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.25.6/packages/babel-cli)

---
updated-dependencies:
- dependency-name: "@babel/cli"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Docs: clarify the title on the 'About > Overview' page (#40762)

* Build(deps-dev): Bump postcss from 8.4.41 to 8.4.44 (#40784)

Bumps [postcss](https://github.com/postcss/postcss) from 8.4.41 to 8.4.44.
- [Release notes](https://github.com/postcss/postcss/releases)
- [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md)
- [Commits](https://github.com/postcss/postcss/compare/8.4.41...8.4.44)

---
updated-dependencies:
- dependency-name: postcss
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>

* Docs: add missing `$enable-css-grid` in 'Customize > Options' (#40797)

Co-authored-by: Julien Déramond <juderamond@gmail.com>

* Remove aria-label from this PR

* Rollback unwanted modif

* Build(deps-dev): Bump postcss from 8.4.44 to 8.4.45 (#40806)

Bumps [postcss](https://github.com/postcss/postcss) from 8.4.44 to 8.4.45.
- [Release notes](https://github.com/postcss/postcss/releases)
- [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md)
- [Commits](https://github.com/postcss/postcss/compare/8.4.44...8.4.45)

---
updated-dependencies:
- dependency-name: postcss
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Fix popover remaining open when toggled after being shown (#40803)

Co-authored-by: Dmitry Sergienko <dmitry.sergienko@codefirst.net>
Co-authored-by: Julien Déramond <juderamond@gmail.com>

* Docs: update notice on Safari flexbox gap support in 'Helpers > Stacks' (#40844)

* Add missing aria-hidden to decorative `<svg>` and `aria-label` and `role="img"` to informative ones in examples until dropdowns

* .

* Add missing aria-hidden to decorative `<svg>` and `aria-label` and `role="img"` to informative ones in examples until modals

* rollback

* rollback

* Docs: update `min-height` inline style for modal with long content (#40870)

* Add missing svgs

* Build(deps): Bump body-parser in the npm_and_yarn group (#40862)

Bumps the npm_and_yarn group with 1 update: [body-parser](https://github.com/expressjs/body-parser).


Updates `body-parser` from 1.20.2 to 1.20.3
- [Release notes](https://github.com/expressjs/body-parser/releases)
- [Changelog](https://github.com/expressjs/body-parser/blob/master/HISTORY.md)
- [Commits](https://github.com/expressjs/body-parser/compare/1.20.2...1.20.3)

---
updated-dependencies:
- dependency-name: body-parser
  dependency-type: indirect
  dependency-group: npm_and_yarn
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Build(deps-dev): Bump rollup in the npm_and_yarn group (#40886)

Bumps the npm_and_yarn group with 1 update: [rollup](https://github.com/rollup/rollup).


Updates `rollup` from 4.21.2 to 4.23.0
- [Release notes](https://github.com/rollup/rollup/releases)
- [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md)
- [Commits](https://github.com/rollup/rollup/compare/v4.21.2...v4.23.0)

---
updated-dependencies:
- dependency-name: rollup
  dependency-type: direct:development
  dependency-group: npm_and_yarn
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Build(deps-dev): Bump eslint from 8.57.0 to 8.57.1 (#40843)

Bumps [eslint](https://github.com/eslint/eslint) from 8.57.0 to 8.57.1.
- [Release notes](https://github.com/eslint/eslint/releases)
- [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md)
- [Commits](https://github.com/eslint/eslint/compare/v8.57.0...v8.57.1)

---
updated-dependencies:
- dependency-name: eslint
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Build(deps-dev): Bump hugo-bin from 0.130.1 to 0.132.0 (#40882)

Bumps [hugo-bin](https://github.com/fenneclab/hugo-bin) from 0.130.1 to 0.132.0.
- [Release notes](https://github.com/fenneclab/hugo-bin/releases)
- [Commits](https://github.com/fenneclab/hugo-bin/compare/v0.130.1...v0.132.0)

---
updated-dependencies:
- dependency-name: hugo-bin
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Build(deps-dev): Bump npm-run-all2 from 6.2.2 to 6.2.3 (#40842)

Bumps [npm-run-all2](https://github.com/bcomnes/npm-run-all2) from 6.2.2 to 6.2.3.
- [Release notes](https://github.com/bcomnes/npm-run-all2/releases)
- [Changelog](https://github.com/bcomnes/npm-run-all2/blob/master/CHANGELOG.md)
- [Commits](https://github.com/bcomnes/npm-run-all2/compare/v6.2.2...v6.2.3)

---
updated-dependencies:
- dependency-name: npm-run-all2
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Dependabot: switch to grouped updates (#40888)

* Build(deps-dev): Bump terser from 5.31.6 to 5.34.1 (#40883)

Bumps [terser](https://github.com/terser/terser) from 5.31.6 to 5.34.1.
- [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md)
- [Commits](https://github.com/terser/terser/compare/v5.31.6...v5.34.1)

---
updated-dependencies:
- dependency-name: terser
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Build(deps-dev): Bump the development-dependencies group across 1 directory with 9 updates (#40895)

* Build(deps-dev): Bump the development-dependencies group across 1 directory with 9 updates

Bumps the development-dependencies group with 9 updates in the / directory:

| Package | From | To |
| --- | --- | --- |
| [@docsearch/js](https://github.com/algolia/docsearch) | `3.6.1` | `3.6.2` |
| [@rollup/plugin-commonjs](https://github.com/rollup/plugins/tree/HEAD/packages/commonjs) | `26.0.1` | `28.0.0` |
| [@rollup/plugin-node-resolve](https://github.com/rollup/plugins/tree/HEAD/packages/node-resolve) | `15.2.3` | `15.3.0` |
| [@rollup/plugin-replace](https://github.com/rollup/plugins/tree/HEAD/packages/replace) | `5.0.7` | `6.0.1` |
| [eslint-plugin-html](https://github.com/BenoitZugmeyer/eslint-plugin-html) | `8.1.1` | `8.1.2` |
| [nodemon](https://github.com/remy/nodemon) | `3.1.4` | `3.1.7` |
| [postcss](https://github.com/postcss/postcss) | `8.4.45` | `8.4.47` |
| [sass](https://github.com/sass/dart-sass) | `1.77.8` | `1.78.0` |
| [stylelint-config-twbs-bootstrap](https://github.com/twbs/stylelint-config-twbs-bootstrap) | `15.0.0` | `15.1.0` |



Updates `@docsearch/js` from 3.6.1 to 3.6.2
- [Release notes](https://github.com/algolia/docsearch/releases)
- [Changelog](https://github.com/algolia/docsearch/blob/main/CHANGELOG.md)
- [Commits](https://github.com/algolia/docsearch/compare/v3.6.1...v3.6.2)

Updates `@rollup/plugin-commonjs` from 26.0.1 to 28.0.0
- [Changelog](https://github.com/rollup/plugins/blob/master/packages/commonjs/CHANGELOG.md)
- [Commits](https://github.com/rollup/plugins/commits/commonjs-v28.0.0/packages/commonjs)

Updates `@rollup/plugin-node-resolve` from 15.2.3 to 15.3.0
- [Changelog](https://github.com/rollup/plugins/blob/master/packages/node-resolve/CHANGELOG.md)
- [Commits](https://github.com/rollup/plugins/commits/node-resolve-v15.3.0/packages/node-resolve)

Updates `@rollup/plugin-replace` from 5.0.7 to 6.0.1
- [Changelog](https://github.com/rollup/plugins/blob/master/packages/replace/CHANGELOG.md)
- [Commits](https://github.com/rollup/plugins/commits/json-v6.0.1/packages/replace)

Updates `eslint-plugin-html` from 8.1.1 to 8.1.2
- [Changelog](https://github.com/BenoitZugmeyer/eslint-plugin-html/blob/main/CHANGELOG.md)
- [Commits](https://github.com/BenoitZugmeyer/eslint-plugin-html/compare/v8.1.1...v8.1.2)

Updates `nodemon` from 3.1.4 to 3.1.7
- [Release notes](https://github.com/remy/nodemon/releases)
- [Commits](https://github.com/remy/nodemon/compare/v3.1.4...v3.1.7)

Updates `postcss` from 8.4.45 to 8.4.47
- [Release notes](https://github.com/postcss/postcss/releases)
- [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md)
- [Commits](https://github.com/postcss/postcss/compare/8.4.45...8.4.47)

Updates `sass` from 1.77.8 to 1.78.0
- [Release notes](https://github.com/sass/dart-sass/releases)
- [Changelog](https://github.com/sass/dart-sass/blob/main/CHANGELOG.md)
- [Commits](https://github.com/sass/dart-sass/compare/1.77.8...1.78.0)

Updates `stylelint-config-twbs-bootstrap` from 15.0.0 to 15.1.0
- [Release notes](https://github.com/twbs/stylelint-config-twbs-bootstrap/releases)
- [Commits](https://github.com/twbs/stylelint-config-twbs-bootstrap/compare/v15.0.0...v15.1.0)

---
updated-dependencies:
- dependency-name: "@docsearch/js"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: development-dependencies
- dependency-name: "@rollup/plugin-commonjs"
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: development-dependencies
- dependency-name: "@rollup/plugin-node-resolve"
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: development-dependencies
- dependency-name: "@rollup/plugin-replace"
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: development-dependencies
- dependency-name: eslint-plugin-html
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: development-dependencies
- dependency-name: nodemon
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: development-dependencies
- dependency-name: postcss
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: development-dependencies
- dependency-name: sass
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: development-dependencies
- dependency-name: stylelint-config-twbs-bootstrap
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: development-dependencies
...

Signed-off-by: dependabot[bot] <support@github.com>

* Fix new stylelint-config-recess-order issues (#40887)

* Pin sass to 1.78

If the issues are fixed, it should be updated again along with the caret operator.

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>

* Update devDependencies

* jasmine       ^5.2.0  →   ^5.3.0
* stylelint    ^16.8.1  →  ^16.9.0

* Remove unneeded flexbug workaround (#40876)

This was only needed for Internet Explorer. Removing it saves a couple of bytes. :-)

REF: https://github.com/philipwalton/flexbugs#flexbug-4

* package.json: ignore more deps

* Docs: fix `$enable-css-grid` → `$enable-cssgrid` in 'Customize > Options' (#40818)

* Docs: Indicate links in foreign language in Translations page (#40767)

Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>

* Docs: Make "Edit in Stackblitz" links explicit in 'Examples' page (#40766)

Co-authored-by: Julien Déramond <juderamond@gmail.com>

* Docs: remove unused class in the homepage (#40900)

Co-authored-by: Julien Déramond <juderamond@gmail.com>

* Docs: drop useless `.justify-content-start` class in homepage (#40914)

* Examples: fix Cheatsheet examples horizontal scrolling (#40799)

* Docs: precise how to add new `.order-*` classes in 'Layout > Columns' (#40821)

Co-authored-by: Tobi <TobiGr@users.noreply.github.com>
Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>

* Docs: replace `.grid` by `.d-grid` in 'Utilities > Spacing' gap section (#40790)

Co-authored-by: Julien Déramond <juderamond@gmail.com>

* Build(deps-dev): Bump the development-dependencies group across 1 directory with 6 updates (#40920)

Bumps the development-dependencies group with 6 updates in the / directory:

| Package | From | To |
| --- | --- | --- |
| [@babel/cli](https://github.com/babel/babel/tree/HEAD/packages/babel-cli) | `7.25.6` | `7.25.7` |
| [@babel/core](https://github.com/babel/babel/tree/HEAD/packages/babel-core) | `7.25.2` | `7.25.7` |
| [@babel/preset-env](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-env) | `7.25.4` | `7.25.7` |
| [eslint-plugin-import](https://github.com/import-js/eslint-plugin-import) | `2.30.0` | `2.31.0` |
| [rollup](https://github.com/rollup/rollup) | `4.23.0` | `4.24.0` |
| [sass-true](https://github.com/oddbird/true) | `8.0.0` | `8.1.0` |



Updates `@babel/cli` from 7.25.6 to 7.25.7
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.25.7/packages/babel-cli)

Updates `@babel/core` from 7.25.2 to 7.25.7
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.25.7/packages/babel-core)

Updates `@babel/preset-env` from 7.25.4 to 7.25.7
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.25.7/packages/babel-preset-env)

Updates `eslint-plugin-import` from 2.30.0 to 2.31.0
- [Release notes](https://github.com/import-js/eslint-plugin-import/releases)
- [Changelog](https://github.com/import-js/eslint-plugin-import/blob/main/CHANGELOG.md)
- [Commits](https://github.com/import-js/eslint-plugin-import/compare/v2.30.0...v2.31.0)

Updates `rollup` from 4.23.0 to 4.24.0
- [Release notes](https://github.com/rollup/rollup/releases)
- [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md)
- [Commits](https://github.com/rollup/rollup/compare/v4.23.0...v4.24.0)

Updates `sass-true` from 8.0.0 to 8.1.0
- [Release notes](https://github.com/oddbird/true/releases)
- [Changelog](https://github.com/oddbird/true/blob/main/CHANGELOG.md)
- [Commits](https://github.com/oddbird/true/compare/v8.0.0...v8.1.0)

---
updated-dependencies:
- dependency-name: "@babel/cli"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: development-dependencies
- dependency-name: "@babel/core"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: development-dependencies
- dependency-name: "@babel/preset-env"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: development-dependencies
- dependency-name: eslint-plugin-import
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: development-dependencies
- dependency-name: rollup
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: development-dependencies
- dependency-name: sass-true
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: development-dependencies
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Build(deps): Bump the npm_and_yarn group with 2 updates (#40929)

Bumps the npm_and_yarn group with 2 updates: [cookie](https://github.com/jshttp/cookie) and [socket.io](https://github.com/socketio/socket.io).


Updates `cookie` from 0.4.2 to 0.7.2
- [Release notes](https://github.com/jshttp/cookie/releases)
- [Commits](https://github.com/jshttp/cookie/compare/v0.4.2...v0.7.2)

Updates `socket.io` from 4.7.5 to 4.8.0
- [Release notes](https://github.com/socketio/socket.io/releases)
- [Changelog](https://github.com/socketio/socket.io/blob/main/CHANGELOG.md)
- [Commits](https://github.com/socketio/socket.io/compare/socket.io@4.7.5...socket.io@4.8.0)

---
updated-dependencies:
- dependency-name: cookie
  dependency-type: indirect
  dependency-group: npm_and_yarn
- dependency-name: socket.io
  dependency-type: indirect
  dependency-group: npm_and_yarn
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Docs: fix `background-blend-mode` CSS value (#40931)

* Docs: fix example hiding element except on medium and large devices in 'Utilities > Display > Hiding elements' (#40951)

* Build(deps-dev): Bump the development-dependencies group across 1 directory with 6 updates (#40953)

Bumps the development-dependencies group with 6 updates in the / directory:

| Package | From | To |
| --- | --- | --- |
| [@babel/core](https://github.com/babel/babel/tree/HEAD/packages/babel-core) | `7.25.7` | `7.25.8` |
| [@babel/preset-env](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-env) | `7.25.7` | `7.25.8` |
| [@rollup/plugin-commonjs](https://github.com/rollup/plugins/tree/HEAD/packages/commonjs) | `28.0.0` | `28.0.1` |
| [hugo-bin](https://github.com/fenneclab/hugo-bin) | `0.132.0` | `0.133.1` |
| [stylelint](https://github.com/stylelint/stylelint) | `16.9.0` | `16.10.0` |
| [terser](https://github.com/terser/terser) | `5.34.1` | `5.36.0` |



Updates `@babel/core` from 7.25.7 to 7.25.8
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.25.8/packages/babel-core)

Updates `@babel/preset-env` from 7.25.7 to 7.25.8
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.25.8/packages/babel-preset-env)

Updates `@rollup/plugin-commonjs` from 28.0.0 to 28.0.1
- [Changelog](https://github.com/rollup/plugins/blob/master/packages/commonjs/CHANGELOG.md)
- [Commits](https://github.com/rollup/plugins/commits/commonjs-v28.0.1/packages/commonjs)

Updates `hugo-bin` from 0.132.0 to 0.133.1
- [Release notes](https://github.com/fenneclab/hugo-bin/releases)
- [Commits](https://github.com/fenneclab/hugo-bin/compare/v0.132.0...v0.133.1)

Updates `stylelint` from 16.9.0 to 16.10.0
- [Release notes](https://github.com/stylelint/stylelint/releases)
- [Changelog](https://github.com/stylelint/stylelint/blob/main/CHANGELOG.md)
- [Commits](https://github.com/stylelint/stylelint/compare/16.9.0...16.10.0)

Updates `terser` from 5.34.1 to 5.36.0
- [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md)
- [Commits](https://github.com/terser/terser/compare/v5.34.1...v5.36.0)

---
updated-dependencies:
- dependency-name: "@babel/core"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: development-dependencies
- dependency-name: "@babel/preset-env"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: development-dependencies
- dependency-name: "@rollup/plugin-commonjs"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: development-dependencies
- dependency-name: hugo-bin
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: development-dependencies
- dependency-name: stylelint
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: development-dependencies
- dependency-name: terser
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: development-dependencies
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Docs: add ngx-bootstrap to JavaScript frameworks list (#40932)

* Docs: fix transparent navbar in Windows high contrast mode (#40911)

Co-authored-by: Julien Déramond <juderamond@gmail.com>

* Docs: correct example formatting in 'Utilities > API' for linting compliance (#40973)

* Build(deps-dev): Bump the development-dependencies group across 1 directory with 6 updates (#40978)

Bumps the development-dependencies group with 6 updates in the / directory:

| Package | From | To |
| --- | --- | --- |
| [@babel/cli](https://github.com/babel/babel/tree/HEAD/packages/babel-cli) | `7.25.7` | `7.25.9` |
| [@babel/core](https://github.com/babel/babel/tree/HEAD/packages/babel-core) | `7.25.8` | `7.25.9` |
| [@babel/preset-env](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-env) | `7.25.8` | `7.25.9` |
| [hugo-bin](https://github.com/fenneclab/hugo-bin) | `0.133.1` | `0.133.5` |
| [npm-run-all2](https://github.com/bcomnes/npm-run-all2) | `6.2.3` | `7.0.1` |
| [vnu-jar](https://github.com/validator/validator) | `23.4.11` | `24.10.17` |



Updates `@babel/cli` from 7.25.7 to 7.25.9
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.25.9/packages/babel-cli)

Updates `@babel/core` from 7.25.8 to 7.25.9
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.25.9/packages/babel-core)

Updates `@babel/preset-env` from 7.25.8 to 7.25.9
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.25.9/packages/babel-preset-env)

Updates `hugo-bin` from 0.133.1 to 0.133.5
- [Release notes](https://github.com/fenneclab/hugo-bin/releases)
- [Commits](https://github.com/fenneclab/hugo-bin/compare/v0.133.1...v0.133.5)

Updates `npm-run-all2` from 6.2.3 to 7.0.1
- [Release notes](https://github.com/bcomnes/npm-run-all2/releases)
- [Changelog](https://github.com/bcomnes/npm-run-all2/blob/master/CHANGELOG.md)
- [Commits](https://github.com/bcomnes/npm-run-all2/compare/v6.2.3...v7.0.1)

Updates `vnu-jar` from 23.4.11 to 24.10.17
- [Release notes](https://github.com/validator/validator/releases)
- [Changelog](https://github.com/validator/validator/blob/main/CHANGELOG.md)
- [Commits](https://github.com/validator/validator/commits)

---
updated-dependencies:
- dependency-name: "@babel/cli"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: development-dependencies
- dependency-name: "@babel/core"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: development-dependencies
- dependency-name: "@babel/preset-env"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: development-dependencies
- dependency-name: hugo-bin
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: development-dependencies
- dependency-name: npm-run-all2
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: development-dependencies
- dependency-name: vnu-jar
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: development-dependencies
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Build(deps-dev): Bump the development-dependencies group across 1 directory with 5 updates (#41010)

Bumps the development-dependencies group with 5 updates in the / directory:

| Package | From | To |
| --- | --- | --- |
| [@babel/core](https://github.com/babel/babel/tree/HEAD/packages/babel-core) | `7.25.9` | `7.26.0` |
| [@babel/preset-env](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-env) | `7.25.9` | `7.26.0` |
| [@docsearch/js](https://github.com/algolia/docsearch) | `3.6.2` | `3.7.0` |
| [hugo-bin](https://github.com/fenneclab/hugo-bin) | `0.133.5` | `0.134.1` |
| [rollup](https://github.com/rollup/rollup) | `4.24.0` | `4.24.4` |



Updates `@babel/core` from 7.25.9 to 7.26.0
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.26.0/packages/babel-core)

Updates `@babel/preset-env` from 7.25.9 to 7.26.0
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.26.0/packages/babel-preset-env)

Updates `@docsearch/js` from 3.6.2 to 3.7.0
- [Release notes](https://github.com/algolia/docsearch/releases)
- [Changelog](https://github.com/algolia/docsearch/blob/main/CHANGELOG.md)
- [Commits](https://github.com/algolia/docsearch/compare/v3.6.2...v3.7.0)

Updates `hugo-bin` from 0.133.5 to 0.134.1
- [Release notes](https://github.com/fenneclab/hugo-bin/releases)
- [Commits](https://github.com/fenneclab/hugo-bin/compare/v0.133.5...v0.134.1)

Updates `rollup` from 4.24.0 to 4.24.4
- [Release notes](https://github.com/rollup/rollup/releases)
- [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md)
- [Commits](https://github.com/rollup/rollup/compare/v4.24.0...v4.24.4)

---
updated-dependencies:
- dependency-name: "@babel/core"
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: development-dependencies
- dependency-name: "@babel/preset-env"
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: development-dependencies
- dependency-name: "@docsearch/js"
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: development-dependencies
- dependency-name: hugo-bin
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: development-dependencies
- dependency-name: rollup
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: development-dependencies
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Docs: fix `.order` values in the migration guide (#41030)

* Fix left alignment of floating labels with `.form-select` size variants (#41013)

Co-authored-by: Patrick Kroog <pk@kroog.com>
Co-authored-by: Christian Oliff <christianoliff@pm.me>
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>

* Docs: Fix broken link in dropdowns documentation (#41052)

* Docs: add warning callout for Yarn Berry for Bootstrap examples compat (#41036)

* Build(deps-dev): Bump the development-dependencies group across 1 directory with 7 updates (#41082)

Bumps the development-dependencies group with 7 updates in the / directory:

| Package | From | To |
| --- | --- | --- |
| [@babel/cli](https://github.com/babel/babel/tree/HEAD/packages/babel-cli) | `7.25.9` | `7.26.4` |
| [@docsearch/js](https://github.com/algolia/docsearch) | `3.7.0` | `3.8.0` |
| [hugo-bin](https://github.com/fenneclab/hugo-bin) | `0.134.1` | `0.136.3` |
| [postcss](https://github.com/postcss/postcss) | `8.4.47` | `8.4.49` |
| [rollup](https://github.com/rollup/rollup) | `4.24.4` | `4.28.1` |
| [stylelint](https://github.com/stylelint/stylelint) | `16.10.0` | `16.11.0` |
| [terser](https://github.com/terser/terser) | `5.36.0` | `5.37.0` |



Updates `@babel/cli` from 7.25.9 to 7.26.4
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.26.4/packages/babel-cli)

Updates `@docsearch/js` from 3.7.0 to 3.8.0
- [Release notes](https://github.com/algolia/docsearch/releases)
- [Changelog](https://github.com/algolia/docsearch/blob/main/CHANGELOG.md)
- [Commits](https://github.com/algolia/docsearch/compare/v3.7.0...v3.8.0)

Updates `hugo-bin` from 0.134.1 to 0.136.3
- [Release notes](https://github.com/fenneclab/hugo-bin/releases)
- [Commits](https://github.com/fenneclab/hugo-bin/compare/v0.134.1...v0.136.3)

Updates `postcss` from 8.4.47 to 8.4.49
- [Release notes](https://github.com/postcss/postcss/releases)
- [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md)
- [Commits](https://github.com/postcss/postcss/compare/8.4.47...8.4.49)

Updates `rollup` from 4.24.4 to 4.28.1
- [Release notes](https://github.com/rollup/rollup/releases)
- [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md)
- [Commits](https://github.com/rollup/rollup/compare/v4.24.4...v4.28.1)

Updates `stylelint` from 16.10.0 to 16.11.0
- [Release notes](https://github.com/stylelint/stylelint/releases)
- [Changelog](https://github.com/stylelint/stylelint/blob/main/CHANGELOG.md)
- [Commits](https://github.com/stylelint/stylelint/compare/16.10.0...16.11.0)

Updates `terser` from 5.36.0 to 5.37.0
- [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md)
- [Commits](https://github.com/terser/terser/compare/v5.36.0...v5.37.0)

---
updated-dependencies:
- dependency-name: "@babel/cli"
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: development-dependencies
- dependency-name: "@docsearch/js"
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: development-dependencies
- dependency-name: hugo-bin
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: development-dependencies
- dependency-name: postcss
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: development-dependencies
- dependency-name: rollup
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: development-dependencies
- dependency-name: stylelint
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: development-dependencies
- dependency-name: terser
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: development-dependencies
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Update devDependencies and regenerate package-lock.json

* Move aria-label to wrapping links

avoids unnecessary "link, graphic, blah" announcement in screen readers

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Dmitry <dmitrysergienko2000@gmail.com>
Co-authored-by: Dmitry Sergienko <dmitry.sergienko@codefirst.net>
Co-authored-by: Christian Oliff <christianoliff@pm.me>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
Co-authored-by: Mohamad Salman <139472418+MohamadSalman11@users.noreply.github.com>
Co-authored-by: Tobi <TobiGr@users.noreply.github.com>
Co-authored-by: Patrick (Casus Belli) <pkroog@kroog.org>
Co-authored-by: Patrick Kroog <pk@kroog.com>
Co-authored-by: Vincent Prothais <vincent.prothais@orange.com>
This commit is contained in:
Hannah Issermann 2024-12-10 10:29:02 +01:00 committed by GitHub
parent 760b4cc41d
commit 1d92d0b68f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
23 changed files with 187 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/content/docs/5.3/components/tooltips.md
View File

@ -112,7 +112,7 @@ With an SVG:
<div class="bd-example tooltip-demo"> <div class="bd-example tooltip-demo">
<a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip" aria-label="Hover or focus to see default tooltip"> <a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip" aria-label="Hover or focus to see default tooltip">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100"> <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100" aria-hidden="true">
<rect width="100%" height="100%" fill="#563d7c"/> <rect width="100%" height="100%" fill="#563d7c"/>
<circle cx="50" cy="50" r="30" fill="#007bff"/> <circle cx="50" cy="50" r="30" fill="#007bff"/>
</svg> </svg>

28
site/content/docs/5.3/examples/badges/index.html
View File

@ -82,16 +82,16 @@ body_class: ""
<div class="d-flex gap-2 justify-content-center py-5"> <div class="d-flex gap-2 justify-content-center py-5">
<span class="badge d-flex p-2 align-items-center text-bg-primary rounded-pill"> <span class="badge d-flex p-2 align-items-center text-bg-primary rounded-pill">
<span class="px-1">Primary</span> <span class="px-1">Primary 1</span>
<a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete primary 1"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle rounded-pill"> <span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle rounded-pill">
<span class="px-1">Primary</span> <span class="px-1">Primary 2</span>
<a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete primary 2"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill"> <span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill">
<span class="px-1">Primary</span> <span class="px-1">Primary 3</span>
<a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete primary 3"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
</div> </div>
@ -102,48 +102,48 @@ body_class: ""
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Primary Primary
<span class="vr mx-2"></span> <span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete primary"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex align-items-center p-1 pe-2 text-secondary-emphasis bg-secondary-subtle border border-secondary-subtle rounded-pill"> <span class="badge d-flex align-items-center p-1 pe-2 text-secondary-emphasis bg-secondary-subtle border border-secondary-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Secondary Secondary
<span class="vr mx-2"></span> <span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete secondary"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex align-items-center p-1 pe-2 text-success-emphasis bg-success-subtle border border-success-subtle rounded-pill"> <span class="badge d-flex align-items-center p-1 pe-2 text-success-emphasis bg-success-subtle border border-success-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Success Success
<span class="vr mx-2"></span> <span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete success"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex align-items-center p-1 pe-2 text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded-pill"> <span class="badge d-flex align-items-center p-1 pe-2 text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Danger Danger
<span class="vr mx-2"></span> <span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete danger"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex align-items-center p-1 pe-2 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-pill"> <span class="badge d-flex align-items-center p-1 pe-2 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Warning Warning
<span class="vr mx-2"></span> <span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete warning"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex align-items-center p-1 pe-2 text-info-emphasis bg-info-subtle border border-info-subtle rounded-pill"> <span class="badge d-flex align-items-center p-1 pe-2 text-info-emphasis bg-info-subtle border border-info-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Info Info
<span class="vr mx-2"></span> <span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete info"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex align-items-center p-1 pe-2 text-light-emphasis bg-light-subtle border border-dark-subtle rounded-pill"> <span class="badge d-flex align-items-center p-1 pe-2 text-light-emphasis bg-light-subtle border border-dark-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Light Light
<span class="vr mx-2"></span> <span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete light"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-dark-subtle border border-dark-subtle rounded-pill"> <span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-dark-subtle border border-dark-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Dark Dark
<span class="vr mx-2"></span> <span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete dark"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
</div> </div>

4
site/content/docs/5.3/examples/blog-rtl/index.html
View File

@ -75,7 +75,7 @@ extra_css:
<p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p> <p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link"> <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
أكمل القراءة أكمل القراءة
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
<div class="col-auto d-none d-lg-block"> <div class="col-auto d-none d-lg-block">
@ -92,7 +92,7 @@ extra_css:
<p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p> <p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link"> <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
أكمل القراءة أكمل القراءة
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
<div class="col-auto d-none d-lg-block"> <div class="col-auto d-none d-lg-block">

4
site/content/docs/5.3/examples/blog/index.html
View File

@ -74,7 +74,7 @@ extra_css:
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p> <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link"> <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
Continue reading Continue reading
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
<div class="col-auto d-none d-lg-block"> <div class="col-auto d-none d-lg-block">
@ -91,7 +91,7 @@ extra_css:
<p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p> <p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link"> <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
Continue reading Continue reading
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
<div class="col-auto d-none d-lg-block"> <div class="col-auto d-none d-lg-block">

6
site/content/docs/5.3/examples/breadcrumbs/index.html
View File

@ -29,7 +29,7 @@ body_class: ""
<ol class="breadcrumb p-3 bg-body-tertiary rounded-3"> <ol class="breadcrumb p-3 bg-body-tertiary rounded-3">
<li class="breadcrumb-item"> <li class="breadcrumb-item">
<a class="link-body-emphasis" href="#"> <a class="link-body-emphasis" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
<span class="visually-hidden">Home</span> <span class="visually-hidden">Home</span>
</a> </a>
</li> </li>
@ -50,7 +50,7 @@ body_class: ""
<ol class="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3"> <ol class="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3">
<li class="breadcrumb-item"> <li class="breadcrumb-item">
<a class="link-body-emphasis" href="#"> <a class="link-body-emphasis" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
<span class="visually-hidden">Home</span> <span class="visually-hidden">Home</span>
</a> </a>
</li> </li>
@ -71,7 +71,7 @@ body_class: ""
<ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3"> <ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3">
<li class="breadcrumb-item"> <li class="breadcrumb-item">
<a class="link-body-emphasis fw-semibold text-decoration-none" href="#"> <a class="link-body-emphasis fw-semibold text-decoration-none" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
Home Home
</a> </a>
</li> </li>

8
site/content/docs/5.3/examples/buttons/index.html
View File

@ -65,22 +65,22 @@ body_class: ""
<div class="d-flex gap-2 justify-content-center pt-5 pb-4"> <div class="d-flex gap-2 justify-content-center pt-5 pb-4">
<button class="btn btn-primary rounded-circle p-2 lh-1" type="button"> <button class="btn btn-primary rounded-circle p-2 lh-1" type="button">
<svg class="bi" width="16" height="16"><use xlink:href="#x-lg"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
<span class="visually-hidden">Dismiss</span> <span class="visually-hidden">Dismiss</span>
</button> </button>
<button class="btn btn-outline-primary rounded-circle p-2 lh-1" type="button"> <button class="btn btn-outline-primary rounded-circle p-2 lh-1" type="button">
<svg class="bi" width="16" height="16"><use xlink:href="#x-lg"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
<span class="visually-hidden">Dismiss</span> <span class="visually-hidden">Dismiss</span>
</button> </button>
</div> </div>
<div class="d-flex gap-2 justify-content-center pb-5"> <div class="d-flex gap-2 justify-content-center pb-5">
<button class="btn btn-primary rounded-circle p-3 lh-1" type="button"> <button class="btn btn-primary rounded-circle p-3 lh-1" type="button">
<svg class="bi" width="24" height="24"><use xlink:href="#x-lg"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
<span class="visually-hidden">Dismiss</span> <span class="visually-hidden">Dismiss</span>
</button> </button>
<button class="btn btn-outline-primary rounded-circle p-3 lh-1" type="button"> <button class="btn btn-outline-primary rounded-circle p-3 lh-1" type="button">
<svg class="bi" width="24" height="24"><use xlink:href="#x-lg"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
<span class="visually-hidden">Dismiss</span> <span class="visually-hidden">Dismiss</span>
</button> </button>
</div> </div>

32
site/content/docs/5.3/examples/dashboard-rtl/index.html
View File

@ -68,12 +68,12 @@ extra_js:
<ul class="navbar-nav flex-row d-md-none"> <ul class="navbar-nav flex-row d-md-none">
<li class="nav-item text-nowrap"> <li class="nav-item text-nowrap">
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="تبديل البحث"> <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="تبديل البحث">
<svg class="bi"><use xlink:href="#search"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#search"/></svg>
</button> </button>
</li> </li>
<li class="nav-item text-nowrap"> <li class="nav-item text-nowrap">
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="تبديل التنقل"> <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="تبديل التنقل">
<svg class="bi"><use xlink:href="#list"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#list"/></svg>
</button> </button>
</li> </li>
</ul> </ul>
@ -95,37 +95,37 @@ extra_js:
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#"> <a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
<svg class="bi"><use xlink:href="#house-fill"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#house-fill"/></svg>
لوحة القيادة لوحة القيادة
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark"/></svg>
الطلبات الطلبات
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#cart"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#cart"/></svg>
المنتجات المنتجات
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#people"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#people"/></svg>
الزبائن الزبائن
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#graph-up"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#graph-up"/></svg>
التقارير التقارير
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#puzzle"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#puzzle"/></svg>
التكاملات التكاملات
</a> </a>
</li> </li>
@ -134,31 +134,31 @@ extra_js:
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase"> <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
<span>التقارير المحفوظة</span> <span>التقارير المحفوظة</span>
<a class="link-secondary" href="#" aria-label="إضافة تقرير جديد"> <a class="link-secondary" href="#" aria-label="إضافة تقرير جديد">
<svg class="bi"><use xlink:href="#plus-circle"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#plus-circle"/></svg>
</a> </a>
</h6> </h6>
<ul class="nav flex-column mb-auto"> <ul class="nav flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
الشهر الحالي الشهر الحالي
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
الربع الأخير الربع الأخير
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
التفاعل الإجتماعي التفاعل الإجتماعي
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
مبيعات نهاية العام مبيعات نهاية العام
</a> </a>
</li> </li>
@ -169,13 +169,13 @@ extra_js:
<ul class="nav flex-column mb-auto"> <ul class="nav flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#gear-wide-connected"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#gear-wide-connected"/></svg>
إعدادات إعدادات
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#door-closed"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#door-closed"/></svg>
خروج خروج
</a> </a>
</li> </li>
@ -193,7 +193,7 @@ extra_js:
<button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button> <button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button>
</div> </div>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1"> <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
<svg class="bi"><use xlink:href="#calendar3"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
هذا الأسبوع هذا الأسبوع
</button> </button>
</div> </div>

32
site/content/docs/5.3/examples/dashboard/index.html
View File

@ -67,12 +67,12 @@ extra_js:
<ul class="navbar-nav flex-row d-md-none"> <ul class="navbar-nav flex-row d-md-none">
<li class="nav-item text-nowrap"> <li class="nav-item text-nowrap">
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle search"> <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle search">
<svg class="bi"><use xlink:href="#search"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#search"/></svg>
</button> </button>
</li> </li>
<li class="nav-item text-nowrap"> <li class="nav-item text-nowrap">
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"> <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<svg class="bi"><use xlink:href="#list"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#list"/></svg>
</button> </button>
</li> </li>
</ul> </ul>
@ -94,37 +94,37 @@ extra_js:
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#"> <a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
<svg class="bi"><use xlink:href="#house-fill"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#house-fill"/></svg>
Dashboard Dashboard
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark"/></svg>
Orders Orders
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#cart"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#cart"/></svg>
Products Products
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#people"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#people"/></svg>
Customers Customers
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#graph-up"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#graph-up"/></svg>
Reports Reports
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#puzzle"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#puzzle"/></svg>
Integrations Integrations
</a> </a>
</li> </li>
@ -133,31 +133,31 @@ extra_js:
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase"> <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
<span>Saved reports</span> <span>Saved reports</span>
<a class="link-secondary" href="#" aria-label="Add a new report"> <a class="link-secondary" href="#" aria-label="Add a new report">
<svg class="bi"><use xlink:href="#plus-circle"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#plus-circle"/></svg>
</a> </a>
</h6> </h6>
<ul class="nav flex-column mb-auto"> <ul class="nav flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
Current month Current month
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
Last quarter Last quarter
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
Social engagement Social engagement
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
Year-end sale Year-end sale
</a> </a>
</li> </li>
@ -168,13 +168,13 @@ extra_js:
<ul class="nav flex-column mb-auto"> <ul class="nav flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#gear-wide-connected"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#gear-wide-connected"/></svg>
Settings Settings
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#door-closed"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#door-closed"/></svg>
Sign out Sign out
</a> </a>
</li> </li>
@ -192,7 +192,7 @@ extra_js:
<button type="button" class="btn btn-sm btn-outline-secondary">Export</button> <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
</div> </div>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1"> <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
<svg class="bi"><use xlink:href="#calendar3"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
This week This week
</button> </button>
</div> </div>

40
site/content/docs/5.3/examples/dropdowns/index.html
View File

@ -124,38 +124,38 @@ body_class: ""
<ul class="dropdown-menu d-block position-static mx-0 shadow w-220px" data-bs-theme="light"> <ul class="dropdown-menu d-block position-static mx-0 shadow w-220px" data-bs-theme="light">
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#files"/></svg>
Documents Documents
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
Photos Photos
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#film"/></svg>
Movies Movies
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
Music Music
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#joystick"/></svg>
Games Games
</a> </a>
</li> </li>
<li><hr class="dropdown-divider"></li> <li><hr class="dropdown-divider"></li>
<li> <li>
<a class="dropdown-item dropdown-item-danger d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item dropdown-item-danger d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#trash"/></svg>
Trash Trash
</a> </a>
</li> </li>
@ -163,38 +163,38 @@ body_class: ""
<ul class="dropdown-menu d-block position-static mx-0 border-0 shadow w-220px" data-bs-theme="dark"> <ul class="dropdown-menu d-block position-static mx-0 border-0 shadow w-220px" data-bs-theme="dark">
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#files"/></svg>
Documents Documents
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
Photos Photos
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#film"/></svg>
Movies Movies
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
Music Music
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#joystick"/></svg>
Games Games
</a> </a>
</li> </li>
<li><hr class="dropdown-divider"></li> <li><hr class="dropdown-divider"></li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#trash"/></svg>
Trash Trash
</a> </a>
</li> </li>
@ -209,7 +209,7 @@ body_class: ""
<div class="cal"> <div class="cal">
<div class="cal-month"> <div class="cal-month">
<button class="btn cal-btn" type="button" aria-label="previous month"> <button class="btn cal-btn" type="button" aria-label="previous month">
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-left-short"/></svg>
</button> </button>
<strong class="cal-month-name">June</strong> <strong class="cal-month-name">June</strong>
<select class="form-select cal-month-name d-none"> <select class="form-select cal-month-name d-none">
@ -288,7 +288,7 @@ body_class: ""
<div class="cal"> <div class="cal">
<div class="cal-month"> <div class="cal-month">
<button class="btn cal-btn" type="button" aria-label="previous month"> <button class="btn cal-btn" type="button" aria-label="previous month">
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-left-short"/></svg>
</button> </button>
<strong class="cal-month-name">June</strong> <strong class="cal-month-name">June</strong>
<select class="form-select cal-month-name d-none"> <select class="form-select cal-month-name d-none">
@ -371,7 +371,7 @@ body_class: ""
<ul class="list-unstyled d-flex flex-column gap-2"> <ul class="list-unstyled d-flex flex-column gap-2">
<li> <li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start"> <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
<svg class="bi" width="24" height="24"><use xlink:href="#image-fill"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
<div> <div>
<strong class="d-block">Main product</strong> <strong class="d-block">Main product</strong>
<small>Take a tour through the product</small> <small>Take a tour through the product</small>
@ -380,7 +380,7 @@ body_class: ""
</li> </li>
<li> <li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start"> <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
<svg class="bi" width="24" height="24"><use xlink:href="#music-note-beamed"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
<div> <div>
<strong class="d-block">Another product</strong> <strong class="d-block">Another product</strong>
<small>Explore this other product we offer</small> <small>Explore this other product we offer</small>
@ -389,7 +389,7 @@ body_class: ""
</li> </li>
<li> <li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start"> <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
<svg class="bi" width="24" height="24"><use xlink:href="#question-circle"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#question-circle"/></svg>
<div> <div>
<strong class="d-block">Support</strong> <strong class="d-block">Support</strong>
<small>Get help from our support crew</small> <small>Get help from our support crew</small>
@ -418,7 +418,7 @@ body_class: ""
<ul class="list-unstyled d-flex flex-column gap-2"> <ul class="list-unstyled d-flex flex-column gap-2">
<li> <li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start"> <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
<svg class="bi" width="24" height="24"><use xlink:href="#image-fill"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
<div> <div>
<strong class="d-block">Main product</strong> <strong class="d-block">Main product</strong>
<small>Take a tour through the product</small> <small>Take a tour through the product</small>
@ -427,7 +427,7 @@ body_class: ""
</li> </li>
<li> <li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start"> <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
<svg class="bi" width="24" height="24"><use xlink:href="#music-note-beamed"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
<div> <div>
<strong class="d-block">Another product</strong> <strong class="d-block">Another product</strong>
<small>Explore this other product we offer</small> <small>Explore this other product we offer</small>
@ -436,7 +436,7 @@ body_class: ""
</li> </li>
<li> <li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start"> <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
<svg class="bi" width="24" height="24"><use xlink:href="#question-circle"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#question-circle"/></svg>
<div> <div>
<strong class="d-block">Support</strong> <strong class="d-block">Support</strong>
<small>Get help from our support crew</small> <small>Get help from our support crew</small>

54
site/content/docs/5.3/examples/features/index.html
View File

@ -66,35 +66,35 @@ body_class: ""
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3"> <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="feature col"> <div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg> <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#collection"/></svg>
</div> </div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3> <h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="icon-link"> <a href="#" class="icon-link">
Call to action Call to action
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
<div class="feature col"> <div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg> <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
</div> </div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3> <h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="icon-link"> <a href="#" class="icon-link">
Call to action Call to action
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
<div class="feature col"> <div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
</div> </div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3> <h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="icon-link"> <a href="#" class="icon-link">
Call to action Call to action
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
</div> </div>
@ -107,7 +107,7 @@ body_class: ""
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3"> <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"> <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
</div> </div>
<div> <div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3> <h3 class="fs-2 text-body-emphasis">Featured title</h3>
@ -119,7 +119,7 @@ body_class: ""
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"> <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg> <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#cpu-fill"/></svg>
</div> </div>
<div> <div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3> <h3 class="fs-2 text-body-emphasis">Featured title</h3>
@ -131,7 +131,7 @@ body_class: ""
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"> <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg> <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#tools"/></svg>
</div> </div>
<div> <div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3> <h3 class="fs-2 text-body-emphasis">Featured title</h3>
@ -159,11 +159,11 @@ body_class: ""
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
</li> </li>
<li class="d-flex align-items-center me-3"> <li class="d-flex align-items-center me-3">
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg> <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use xlink:href="#geo-fill"/></svg>
<small>Earth</small> <small>Earth</small>
</li> </li>
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
<small>3d</small> <small>3d</small>
</li> </li>
</ul> </ul>
@ -180,11 +180,11 @@ body_class: ""
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
</li> </li>
<li class="d-flex align-items-center me-3"> <li class="d-flex align-items-center me-3">
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg> <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use xlink:href="#geo-fill"/></svg>
<small>Pakistan</small> <small>Pakistan</small>
</li> </li>
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
<small>4d</small> <small>4d</small>
</li> </li>
</ul> </ul>
@ -201,11 +201,11 @@ body_class: ""
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
</li> </li>
<li class="d-flex align-items-center me-3"> <li class="d-flex align-items-center me-3">
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg> <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use xlink:href="#geo-fill"/></svg>
<small>California</small> <small>California</small>
</li> </li>
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
<small>5d</small> <small>5d</small>
</li> </li>
</ul> </ul>
@ -222,56 +222,56 @@ body_class: ""
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5"> <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#cpu-fill"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#home"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#geo-fill"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#tools"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
@ -296,7 +296,7 @@ body_class: ""
<div class="row row-cols-1 row-cols-sm-2 g-4"> <div class="row row-cols-1 row-cols-sm-2 g-4">
<div class="col d-flex flex-column gap-2"> <div class="col d-flex flex-column gap-2">
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3"> <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
<svg class="bi" width="1em" height="1em"> <svg class="bi" width="1em" height="1em" aria-hidden="true">
<use xlink:href="#collection" /> <use xlink:href="#collection" />
</svg> </svg>
</div> </div>
@ -306,7 +306,7 @@ body_class: ""
<div class="col d-flex flex-column gap-2"> <div class="col d-flex flex-column gap-2">
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3"> <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
<svg class="bi" width="1em" height="1em"> <svg class="bi" width="1em" height="1em" aria-hidden="true">
<use xlink:href="#gear-fill" /> <use xlink:href="#gear-fill" />
</svg> </svg>
</div> </div>
@ -316,7 +316,7 @@ body_class: ""
<div class="col d-flex flex-column gap-2"> <div class="col d-flex flex-column gap-2">
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3"> <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
<svg class="bi" width="1em" height="1em"> <svg class="bi" width="1em" height="1em" aria-hidden="true">
<use xlink:href="#speedometer" /> <use xlink:href="#speedometer" />
</svg> </svg>
</div> </div>
@ -326,7 +326,7 @@ body_class: ""
<div class="col d-flex flex-column gap-2"> <div class="col d-flex flex-column gap-2">
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3"> <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
<svg class="bi" width="1em" height="1em"> <svg class="bi" width="1em" height="1em" aria-hidden="true">
<use xlink:href="#table" /> <use xlink:href="#table" />
</svg> </svg>
</div> </div>

24
site/content/docs/5.3/examples/footers/index.html
View File

@ -24,8 +24,8 @@ body_class: ""
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top"> <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<p class="col-md-4 mb-0 text-body-secondary">&copy; {{< year >}} Company, Inc</p> <p class="col-md-4 mb-0 text-body-secondary">&copy; {{< year >}} Company, Inc</p>
<a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none"> <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none" aria-label="Bootstrap">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
</a> </a>
<ul class="nav col-md-4 justify-content-end"> <ul class="nav col-md-4 justify-content-end">
@ -43,16 +43,16 @@ body_class: ""
<div class="container"> <div class="container">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top"> <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center"> <div class="col-md-4 d-flex align-items-center">
<a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1"> <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1" aria-label="Bootstrap">
<svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"/></svg> <svg class="bi" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
</a> </a>
<span class="mb-3 mb-md-0 text-body-secondary">&copy; {{< year >}} Company, Inc</span> <span class="mb-3 mb-md-0 text-body-secondary">&copy; {{< year >}} Company, Inc</span>
</div> </div>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex"> <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li> <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Twitter"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#twitter"/></svg></a></li>
<li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li> <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#instagram"/></svg></a></li>
<li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li> <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
</ul> </ul>
</footer> </footer>
</div> </div>
@ -77,8 +77,8 @@ body_class: ""
<div class="container"> <div class="container">
<footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top"> <footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top">
<div class="col mb-3"> <div class="col mb-3">
<a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none"> <a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none" aria-label="Bootstrap">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
</a> </a>
<p class="text-body-secondary">&copy; {{< year >}}</p> <p class="text-body-secondary">&copy; {{< year >}}</p>
</div> </div>
@ -177,9 +177,9 @@ body_class: ""
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top"> <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
<p>&copy; {{< year >}} Company, Inc. All rights reserved.</p> <p>&copy; {{< year >}} Company, Inc. All rights reserved.</p>
<ul class="list-unstyled d-flex"> <ul class="list-unstyled d-flex">
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Twitter"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#twitter"/></svg></a></li>
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#facebook"/></svg></a></li>
</ul> </ul>
</div> </div>
</footer> </footer>

18
site/content/docs/5.3/examples/headers/index.html
View File

@ -36,7 +36,7 @@ body_class: ""
<div class="container"> <div class="container">
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom"> <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none"> <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Simple header</span> <span class="fs-4">Simple header</span>
</a> </a>
@ -159,8 +159,8 @@ body_class: ""
<header class="py-3 mb-3 border-bottom"> <header class="py-3 mb-3 border-bottom">
<div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;"> <div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;">
<div class="dropdown"> <div class="dropdown">
<a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Bootstrap menu">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
</a> </a>
<ul class="dropdown-menu text-small shadow"> <ul class="dropdown-menu text-small shadow">
<li><a class="dropdown-item active" href="#" aria-current="page">Overview</a></li> <li><a class="dropdown-item active" href="#" aria-current="page">Overview</a></li>
@ -225,7 +225,7 @@ body_class: ""
<header class="py-3 mb-4 border-bottom"> <header class="py-3 mb-4 border-bottom">
<div class="container d-flex flex-wrap justify-content-center"> <div class="container d-flex flex-wrap justify-content-center">
<a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto link-body-emphasis text-decoration-none"> <a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Double header</span> <span class="fs-4">Double header</span>
</a> </a>
<form class="col-12 col-lg-auto mb-3 mb-lg-0" role="search"> <form class="col-12 col-lg-auto mb-3 mb-lg-0" role="search">
@ -247,31 +247,31 @@ body_class: ""
<ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small"> <ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
<li> <li>
<a href="#" class="nav-link text-secondary"> <a href="#" class="nav-link text-secondary">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#home"/></svg> <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#home"/></svg>
Home Home
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link text-white"> <a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#speedometer2"/></svg> <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
Dashboard Dashboard
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link text-white"> <a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#table"/></svg> <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#table"/></svg>
Orders Orders
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link text-white"> <a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#grid"/></svg> <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#grid"/></svg>
Products Products
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link text-white"> <a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#people-circle"/></svg> <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
Customers Customers
</a> </a>
</li> </li>

4
site/content/docs/5.3/examples/jumbotrons/index.html
View File

@ -22,7 +22,7 @@ body_class: ""
<div class="container my-5"> <div class="container my-5">
<div class="p-5 text-center bg-body-tertiary rounded-3"> <div class="p-5 text-center bg-body-tertiary rounded-3">
<svg class="bi mt-4 mb-3" style="color: var(--bs-indigo);" width="100" height="100"><use xlink:href="#bootstrap"/></svg> <svg class="bi mt-4 mb-3" style="color: var(--bs-indigo);" width="100" height="100" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<h1 class="text-body-emphasis">Jumbotron with icon</h1> <h1 class="text-body-emphasis">Jumbotron with icon</h1>
<p class="col-lg-8 mx-auto fs-5 text-muted"> <p class="col-lg-8 mx-auto fs-5 text-muted">
This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive <code>.col-*</code> class, and a customized call to action. This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive <code>.col-*</code> class, and a customized call to action.
@ -44,7 +44,7 @@ body_class: ""
<div class="container my-5"> <div class="container my-5">
<div class="position-relative p-5 text-center text-muted bg-body border border-dashed rounded-5"> <div class="position-relative p-5 text-center text-muted bg-body border border-dashed rounded-5">
<button type="button" class="position-absolute top-0 end-0 p-3 m-3 btn-close bg-secondary bg-opacity-10 rounded-pill" aria-label="Close"></button> <button type="button" class="position-absolute top-0 end-0 p-3 m-3 btn-close bg-secondary bg-opacity-10 rounded-pill" aria-label="Close"></button>
<svg class="bi mt-5 mb-3" width="48" height="48"><use xlink:href="#check2-circle"/></svg> <svg class="bi mt-5 mb-3" width="48" height="48" aria-hidden="true"><use xlink:href="#check2-circle"/></svg>
<h1 class="text-body-emphasis">Placeholder jumbotron</h1> <h1 class="text-body-emphasis">Placeholder jumbotron</h1>
<p class="col-lg-6 mx-auto mb-4"> <p class="col-lg-6 mx-auto mb-4">
This faded back jumbotron is useful for placeholder content. It's also a great way to add a bit of context to a page or section when no content is available and to encourage visitors to take a specific action. This faded back jumbotron is useful for placeholder content. It's also a great way to add a bit of context to a page or section when no content is available and to encourage visitors to take a specific action.

14
site/content/docs/5.3/examples/list-groups/index.html
View File

@ -25,7 +25,7 @@ body_class: ""
<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center"> <div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
<div class="list-group"> <div class="list-group">
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true"> <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0"> <img src="https://github.com/twbs.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between"> <div class="d-flex gap-2 w-100 justify-content-between">
<div> <div>
<h6 class="mb-0">List group item heading</h6> <h6 class="mb-0">List group item heading</h6>
@ -35,7 +35,7 @@ body_class: ""
</div> </div>
</a> </a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true"> <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0"> <img src="https://github.com/twbs.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between"> <div class="d-flex gap-2 w-100 justify-content-between">
<div> <div>
<h6 class="mb-0">Another title here</h6> <h6 class="mb-0">Another title here</h6>
@ -45,7 +45,7 @@ body_class: ""
</div> </div>
</a> </a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true"> <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0"> <img src="https://github.com/twbs.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between"> <div class="d-flex gap-2 w-100 justify-content-between">
<div> <div>
<h6 class="mb-0">Third heading</h6> <h6 class="mb-0">Third heading</h6>
@ -118,7 +118,7 @@ body_class: ""
<span class="pt-1 form-checked-content"> <span class="pt-1 form-checked-content">
<strong>Finish sales report</strong> <strong>Finish sales report</strong>
<small class="d-block text-body-secondary"> <small class="d-block text-body-secondary">
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg> <svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Schedule"><use xlink:href="#calendar-event"/></svg>
1:00–2:00pm 1:00–2:00pm
</small> </small>
</span> </span>
@ -128,7 +128,7 @@ body_class: ""
<span class="pt-1 form-checked-content"> <span class="pt-1 form-checked-content">
<strong>Weekly All Hands</strong> <strong>Weekly All Hands</strong>
<small class="d-block text-body-secondary"> <small class="d-block text-body-secondary">
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg> <svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Schedule"><use xlink:href="#calendar-event"/></svg>
2:00–2:30pm 2:00–2:30pm
</small> </small>
</span> </span>
@ -138,7 +138,7 @@ body_class: ""
<span class="pt-1 form-checked-content"> <span class="pt-1 form-checked-content">
<strong>Out of office</strong> <strong>Out of office</strong>
<small class="d-block text-body-secondary"> <small class="d-block text-body-secondary">
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#alarm"/></svg> <svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Reminder"><use xlink:href="#alarm"/></svg>
Tomorrow Tomorrow
</small> </small>
</span> </span>
@ -148,7 +148,7 @@ body_class: ""
<span class="pt-1 form-checked-content"> <span class="pt-1 form-checked-content">
<span contenteditable="true" class="w-100">Add new task...</span> <span contenteditable="true" class="w-100">Add new task...</span>
<small class="d-block text-body-secondary"> <small class="d-block text-body-secondary">
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#list-check"/></svg> <svg class="bi me-1" width="1em" height="1em" aria-hidden="true"><use xlink:href="#list-check"/></svg>
Choose list... Choose list...
</small> </small>
</span> </span>

12
site/content/docs/5.3/examples/modals/index.html
View File

@ -78,21 +78,21 @@ body_class: ""
<ul class="d-grid gap-4 my-5 list-unstyled small"> <ul class="d-grid gap-4 my-5 list-unstyled small">
<li class="d-flex gap-4"> <li class="d-flex gap-4">
<svg class="bi text-body-secondary flex-shrink-0" width="48" height="48"><use xlink:href="#grid-fill"/></svg> <svg class="bi text-body-secondary flex-shrink-0" width="48" height="48" aria-hidden="true"><use xlink:href="#grid-fill"/></svg>
<div> <div>
<h5 class="mb-0">Grid view</h5> <h5 class="mb-0">Grid view</h5>
Not into lists? Try the new grid view. Not into lists? Try the new grid view.
</div> </div>
</li> </li>
<li class="d-flex gap-4"> <li class="d-flex gap-4">
<svg class="bi text-warning flex-shrink-0" width="48" height="48"><use xlink:href="#bookmark-star"/></svg> <svg class="bi text-warning flex-shrink-0" width="48" height="48" aria-hidden="true"><use xlink:href="#bookmark-star"/></svg>
<div> <div>
<h5 class="mb-0">Bookmarks</h5> <h5 class="mb-0">Bookmarks</h5>
Save items you love for easy access later. Save items you love for easy access later.
</div> </div>
</li> </li>
<li class="d-flex gap-4"> <li class="d-flex gap-4">
<svg class="bi text-primary flex-shrink-0" width="48" height="48"><use xlink:href="#film"/></svg> <svg class="bi text-primary flex-shrink-0" width="48" height="48" aria-hidden="true"><use xlink:href="#film"/></svg>
<div> <div>
<h5 class="mb-0">Video embeds</h5> <h5 class="mb-0">Video embeds</h5>
Share videos wherever you go. Share videos wherever you go.
@ -130,15 +130,15 @@ body_class: ""
<hr class="my-4"> <hr class="my-4">
<h2 class="fs-5 fw-bold mb-3">Or use a third-party</h2> <h2 class="fs-5 fw-bold mb-3">Or use a third-party</h2>
<button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit"> <button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit">
<svg class="bi me-1" width="16" height="16"><use xlink:href="#twitter"/></svg> <svg class="bi me-1" width="16" height="16" aria-hidden="true"><use xlink:href="#twitter"/></svg>
Sign up with Twitter Sign up with Twitter
</button> </button>
<button class="w-100 py-2 mb-2 btn btn-outline-primary rounded-3" type="submit"> <button class="w-100 py-2 mb-2 btn btn-outline-primary rounded-3" type="submit">
<svg class="bi me-1" width="16" height="16"><use xlink:href="#facebook"/></svg> <svg class="bi me-1" width="16" height="16" aria-hidden="true"><use xlink:href="#facebook"/></svg>
Sign up with Facebook Sign up with Facebook
</button> </button>
<button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit"> <button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit">
<svg class="bi me-1" width="16" height="16"><use xlink:href="#github"/></svg> <svg class="bi me-1" width="16" height="16" aria-hidden="true"><use xlink:href="#github"/></svg>
Sign up with GitHub Sign up with GitHub
</button> </button>
</form> </form>

26
site/content/docs/5.3/examples/pricing/index.html
View File

@ -104,42 +104,42 @@ extra_css:
<tbody> <tbody>
<tr> <tr>
<th scope="row" class="text-start">Public</th> <th scope="row" class="text-start">Public</th>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
</tr> </tr>
<tr> <tr>
<th scope="row" class="text-start">Private</th> <th scope="row" class="text-start">Private</th>
<td></td> <td></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
</tr> </tr>
</tbody> </tbody>
<tbody> <tbody>
<tr> <tr>
<th scope="row" class="text-start">Permissions</th> <th scope="row" class="text-start">Permissions</th>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
</tr> </tr>
<tr> <tr>
<th scope="row" class="text-start">Sharing</th> <th scope="row" class="text-start">Sharing</th>
<td></td> <td></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
</tr> </tr>
<tr> <tr>
<th scope="row" class="text-start">Unlimited members</th> <th scope="row" class="text-start">Unlimited members</th>
<td></td> <td></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
</tr> </tr>
<tr> <tr>
<th scope="row" class="text-start">Extra security</th> <th scope="row" class="text-start">Extra security</th>
<td></td> <td></td>
<td></td> <td></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

14
site/content/docs/5.3/examples/product/index.html
View File

@ -21,7 +21,7 @@ extra_css:
<nav class="navbar navbar-expand-md bg-dark sticky-top border-bottom" data-bs-theme="dark"> <nav class="navbar navbar-expand-md bg-dark sticky-top border-bottom" data-bs-theme="dark">
<div class="container"> <div class="container">
<a class="navbar-brand d-md-none" href="#"> <a class="navbar-brand d-md-none" href="#">
<svg class="bi" width="24" height="24"><use xlink:href="#aperture"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#aperture"/></svg>
Aperture Aperture
</a> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas" aria-label="Toggle navigation">
@ -34,8 +34,8 @@ extra_css:
</div> </div>
<div class="offcanvas-body"> <div class="offcanvas-body">
<ul class="navbar-nav flex-grow-1 justify-content-between"> <ul class="navbar-nav flex-grow-1 justify-content-between">
<li class="nav-item"><a class="nav-link" href="#"> <li class="nav-item"><a class="nav-link" href="#" aria-label="Aperture">
<svg class="bi" width="24" height="24"><use xlink:href="#aperture"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#aperture"/></svg>
</a></li> </a></li>
<li class="nav-item"><a class="nav-link" href="#">Tour</a></li> <li class="nav-item"><a class="nav-link" href="#">Tour</a></li>
<li class="nav-item"><a class="nav-link" href="#">Product</a></li> <li class="nav-item"><a class="nav-link" href="#">Product</a></li>
@ -43,8 +43,8 @@ extra_css:
<li class="nav-item"><a class="nav-link" href="#">Enterprise</a></li> <li class="nav-item"><a class="nav-link" href="#">Enterprise</a></li>
<li class="nav-item"><a class="nav-link" href="#">Support</a></li> <li class="nav-item"><a class="nav-link" href="#">Support</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li> <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
<li class="nav-item"><a class="nav-link" href="#"> <li class="nav-item"><a class="nav-link" href="#" aria-label="Cart">
<svg class="bi" width="24" height="24"><use xlink:href="#cart"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#cart"/></svg>
</a></li> </a></li>
</ul> </ul>
</div> </div>
@ -60,11 +60,11 @@ extra_css:
<div class="d-flex gap-3 justify-content-center lead fw-normal"> <div class="d-flex gap-3 justify-content-center lead fw-normal">
<a class="icon-link" href="#"> <a class="icon-link" href="#">
Learn more Learn more
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
<a class="icon-link" href="#"> <a class="icon-link" href="#">
Buy Buy
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
</div> </div>

30
site/content/docs/5.3/examples/sidebars/index.html
View File

@ -38,38 +38,38 @@ body_class: ""
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px;"> <div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none"> <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Sidebar</span> <span class="fs-4">Sidebar</span>
</a> </a>
<hr> <hr>
<ul class="nav nav-pills flex-column mb-auto"> <ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link active" aria-current="page"> <a href="#" class="nav-link active" aria-current="page">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#home"/></svg>
Home Home
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link text-white"> <a href="#" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
Dashboard Dashboard
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link text-white"> <a href="#" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#table"/></svg>
Orders Orders
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link text-white"> <a href="#" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#grid"/></svg>
Products Products
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link text-white"> <a href="#" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
Customers Customers
</a> </a>
</li> </li>
@ -94,38 +94,38 @@ body_class: ""
<div class="d-flex flex-column flex-shrink-0 p-3 bg-body-tertiary" style="width: 280px;"> <div class="d-flex flex-column flex-shrink-0 p-3 bg-body-tertiary" style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none"> <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Sidebar</span> <span class="fs-4">Sidebar</span>
</a> </a>
<hr> <hr>
<ul class="nav nav-pills flex-column mb-auto"> <ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link active" aria-current="page"> <a href="#" class="nav-link active" aria-current="page">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#home"/></svg>
Home Home
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link link-body-emphasis"> <a href="#" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
Dashboard Dashboard
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link link-body-emphasis"> <a href="#" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#table"/></svg>
Orders Orders
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link link-body-emphasis"> <a href="#" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#grid"/></svg>
Products Products
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link link-body-emphasis"> <a href="#" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
Customers Customers
</a> </a>
</li> </li>
@ -150,7 +150,7 @@ body_class: ""
<div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 4.5rem;"> <div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 4.5rem;">
<a href="/" class="d-block p-3 link-body-emphasis text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right"> <a href="/" class="d-block p-3 link-body-emphasis text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
<svg class="bi pe-none" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi pe-none" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="visually-hidden">Icon-only</span> <span class="visually-hidden">Icon-only</span>
</a> </a>
<ul class="nav nav-pills nav-flush flex-column mb-auto text-center"> <ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
@ -198,7 +198,7 @@ body_class: ""
<div class="flex-shrink-0 p-3" style="width: 280px;"> <div class="flex-shrink-0 p-3" style="width: 280px;">
<a href="/" class="d-flex align-items-center pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom"> <a href="/" class="d-flex align-items-center pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom">
<svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg> <svg class="bi pe-none me-2" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="fs-5 fw-semibold">Collapsible</span> <span class="fs-5 fw-semibold">Collapsible</span>
</a> </a>
<ul class="list-unstyled ps-0"> <ul class="list-unstyled ps-0">
@ -261,7 +261,7 @@ body_class: ""
<div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-body-tertiary" style="width: 380px;"> <div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-body-tertiary" style="width: 380px;">
<a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom"> <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
<svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg> <svg class="bi pe-none me-2" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="fs-5 fw-semibold">List group</span> <span class="fs-5 fw-semibold">List group</span>
</a> </a>
<div class="list-group list-group-flush border-bottom scrollarea"> <div class="list-group list-group-flush border-bottom scrollarea">

2
site/content/docs/5.3/examples/starter-template/index.html
View File

@ -16,7 +16,7 @@ title: Starter Template
<div class="col-lg-8 mx-auto p-4 py-md-5"> <div class="col-lg-8 mx-auto p-4 py-md-5">
<header class="d-flex align-items-center pb-3 mb-5 border-bottom"> <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
<a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none"> <a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Starter template</span> <span class="fs-4">Starter template</span>
</a> </a>
</header> </header>

2
site/content/docs/5.3/utilities/position.md
View File

@ -94,7 +94,7 @@ Here are some real life examples of these classes:
</button> </button>
<div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill"> <div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill">
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-secondary)" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg> Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-secondary)" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
</div> </div>
<button type="button" class="btn btn-primary position-relative"> <button type="button" class="btn btn-primary position-relative">

2
site/layouts/partials/docs-versions.html
View File

@ -23,7 +23,7 @@
<li> <li>
<a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="{{ if .IsHome }}/{{ else }}/docs/{{ .Site.Params.docs_version }}/{{ $versions_link }}{{ end }}"> <a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="{{ if .IsHome }}/{{ else }}/docs/{{ .Site.Params.docs_version }}/{{ $versions_link }}{{ end }}">
Latest ({{ .Site.Params.docs_version }}.x) Latest ({{ .Site.Params.docs_version }}.x)
<svg class="bi"><use xlink:href="#check2"></use></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#check2"></use></svg>
</a> </a>
</li> </li>
<li> <li>

2
site/layouts/partials/icons/hamburger.svg
View File

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/> <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 428 B

After

Width:  |  Height:  |  Size: 447 B

14
site/layouts/partials/theme-toggler.html
View File

@ -6,29 +6,29 @@
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
{{ if not $isExamples }}data-bs-display="static"{{ end }} {{ if not $isExamples }}data-bs-display="static"{{ end }}
aria-label="Toggle theme (auto)"> aria-label="Toggle theme (auto)">
<svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg> <svg class="bi my-1 theme-icon-active" aria-hidden="true"><use href="#circle-half"></use></svg>
<span class="{{ if $isExamples }}visually-hidden{{ else }}d-lg-none ms-2{{ end }}" id="bd-theme-text">Toggle theme</span> <span class="{{ if $isExamples }}visually-hidden{{ else }}d-lg-none ms-2{{ end }}" id="bd-theme-text">Toggle theme</span>
</button> </button>
<ul class="dropdown-menu dropdown-menu-end{{ if $isExamples }} shadow{{ end }}" aria-labelledby="bd-theme-text"> <ul class="dropdown-menu dropdown-menu-end{{ if $isExamples }} shadow{{ end }}" aria-labelledby="bd-theme-text">
<li> <li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false"> <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
<svg class="bi me-2 opacity-50"><use href="#sun-fill"></use></svg> <svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#sun-fill"></use></svg>
Light Light
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg> <svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
</button> </button>
</li> </li>
<li> <li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false"> <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
<svg class="bi me-2 opacity-50"><use href="#moon-stars-fill"></use></svg> <svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#moon-stars-fill"></use></svg>
Dark Dark
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg> <svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
</button> </button>
</li> </li>
<li> <li>
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true"> <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
<svg class="bi me-2 opacity-50"><use href="#circle-half"></use></svg> <svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#circle-half"></use></svg>
Auto Auto
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg> <svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
</button> </button>
</li> </li>
</ul> </ul>