0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-08 05:54:23 +01:00

131 lines
5.8 KiB
Markdown
Raw Normal View History

---
layout: docs
title: Position
2017-05-28 11:25:59 -07:00
description: Use these shorthand utilities for quickly configuring the position of an element.
group: utilities
2017-05-28 11:25:59 -07:00
toc: true
---
## Position values
Quick positioning classes are available, though they are not responsive.
```html
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
```
## Arrange elements
Arrange elements easily with the edge positioning utilities. The format is `{property}-{position}`.
Where *property* is one of:
- `top` - for the vertical `top` position
- `start` - for the horizontal `left` position (in LTR)
- `bottom` - for the vertical `bottom` position
- `end` - for the horizontal `right` position (in LTR)
Where *position* is one of:
- `0` - for `0` edge position
- `50` - for `50%` edge position
- `100` - for `100%` edge position
(You can add more position values by adding entries to the `$position-values` Sass map variable.)
{{< example class="bd-example-position-utils" >}}
<div class="position-relative">
<div class="position-absolute top-0 start-0"></div>
<div class="position-absolute top-0 end-0"></div>
<div class="position-absolute top-50 start-50"></div>
<div class="position-absolute bottom-50 end-50"></div>
<div class="position-absolute bottom-0 start-0"></div>
<div class="position-absolute bottom-0 end-0"></div>
</div>
{{< /example >}}
## Center elements
In addition, you can also center the elements with the transform utility class `.translate-middle`.
This class applies the transformations `translateX(-50%)` and `translateY(-50%)` to the element which, in combination with the edge positioning utilities, allows you to absolute center an element.
{{< example class="bd-example-position-utils" >}}
<div class="position-relative">
<div class="position-absolute top-0 start-0 translate-middle"></div>
<div class="position-absolute top-0 start-50 translate-middle"></div>
<div class="position-absolute top-0 start-100 translate-middle"></div>
<div class="position-absolute top-50 start-0 translate-middle"></div>
<div class="position-absolute top-50 start-50 translate-middle"></div>
<div class="position-absolute top-50 start-100 translate-middle"></div>
<div class="position-absolute top-100 start-0 translate-middle"></div>
<div class="position-absolute top-100 start-50 translate-middle"></div>
<div class="position-absolute top-100 start-100 translate-middle"></div>
</div>
{{< /example >}}
By adding `.translate-middle-x` or `.translate-middle-y` classes, elements can be positioned only in horizontal or vertical direction.
{{< example class="bd-example-position-utils" >}}
<div class="position-relative">
<div class="position-absolute top-0 start-0"></div>
<div class="position-absolute top-0 start-50 translate-middle-x"></div>
<div class="position-absolute top-0 end-0"></div>
<div class="position-absolute top-50 start-0 translate-middle-y"></div>
<div class="position-absolute top-50 start-50 translate-middle"></div>
<div class="position-absolute top-50 end-0 translate-middle-y"></div>
<div class="position-absolute bottom-0 start-0"></div>
<div class="position-absolute bottom-0 start-50 translate-middle-x"></div>
<div class="position-absolute bottom-0 end-0"></div>
</div>
{{< /example >}}
## Examples
Here are some real life examples of these classes:
Add dark mode support (#35857) * Add dark mode to docs * Minor fix: missing space indentation * Minor fix: revert utilities/z-index added-in modification * Remove prev: and next: from doc because extracted to another PR * Use .bg-body-tertiary in all Utilities > Overflow examples * fix example * Fix up spacing examples * Update box-shadow Sass variables and utilities to auto-adjust to color modes * Remove unused docs class * Refactor form styles to use CSS variable for background images on .form-check and .form-switch * Fix docs selector * Rename shortcut for clarity * Heading consistency * Reintroduce missing 4th grid item in Utilities > Spacing example * Fix bundlewatch * .bd-callout* rendering is OK so removing comments in the code * Update scss/_utilities.scss Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Fix gutters example styling * Fix text colors on background utils docs * redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken * fix some color utils examples * Deprecate mixin notice * Deprecate notice for list-group-item-variant() mixin * Revamp new link CSS vars * Use map-keys in some each Sass files * Remove list-group-item-variant mixin ref in sass loop desc * Display CSS vars scoped to our built-in dark mode * Revert previous commit * Fix list group variant link * Fix typo * Remove imports of alert/list-group mixins in scss/_mixins.scss * Small formatting + comments removal in scss/_content.scss * Fix alert links colors * fix dropdown border-radius mixin * fix link color and underline again, this time using CSS var override for color var and fallback value for the underline * fix colors on docs navbar for dark mode * remove two changes * missing ref * another link underline fix, just use sass vars for link decoration for now * missing color bg docs, plus move dropdown override to scss * more changes from review * fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin * Few fixes around type - Restored CSS variable for color on headings, this time with a fallback value - In conjunction, restored and wrapped the default CSS var with a null value check - Split headings and paragraphs docs in Reboot, elaborated on them * Restyle custom details > summary element in docs * Rewrite some migration docs * fix form checks * Fix up some navbar styling, tweak docs callout * Fix select images, mostly for validation styling * Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs * Update site/content/docs/5.2/components/scrollspy.md Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Apply suggestions from code review Co-authored-by: Julien Déramond <julien.deramond@orange.com> * mention form control css vars in migration guide * Tweak grid and flex docs background examples * clarify some docs * fix some more things Co-authored-by: Julien Déramond <juderamond@gmail.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>
2022-11-28 22:30:26 -08:00
{{< example class="bd-example-position-examples d-flex justify-content-around align-items-center" >}}
<button type="button" class="btn btn-primary position-relative">
Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
</button>
<div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill">
Docs: missing aria-hidden on some decorative SVGs (#40756) * 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>
2024-12-10 10:29:02 +01:00
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>
Add dark mode support (#35857) * Add dark mode to docs * Minor fix: missing space indentation * Minor fix: revert utilities/z-index added-in modification * Remove prev: and next: from doc because extracted to another PR * Use .bg-body-tertiary in all Utilities > Overflow examples * fix example * Fix up spacing examples * Update box-shadow Sass variables and utilities to auto-adjust to color modes * Remove unused docs class * Refactor form styles to use CSS variable for background images on .form-check and .form-switch * Fix docs selector * Rename shortcut for clarity * Heading consistency * Reintroduce missing 4th grid item in Utilities > Spacing example * Fix bundlewatch * .bd-callout* rendering is OK so removing comments in the code * Update scss/_utilities.scss Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Fix gutters example styling * Fix text colors on background utils docs * redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken * fix some color utils examples * Deprecate mixin notice * Deprecate notice for list-group-item-variant() mixin * Revamp new link CSS vars * Use map-keys in some each Sass files * Remove list-group-item-variant mixin ref in sass loop desc * Display CSS vars scoped to our built-in dark mode * Revert previous commit * Fix list group variant link * Fix typo * Remove imports of alert/list-group mixins in scss/_mixins.scss * Small formatting + comments removal in scss/_content.scss * Fix alert links colors * fix dropdown border-radius mixin * fix link color and underline again, this time using CSS var override for color var and fallback value for the underline * fix colors on docs navbar for dark mode * remove two changes * missing ref * another link underline fix, just use sass vars for link decoration for now * missing color bg docs, plus move dropdown override to scss * more changes from review * fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin * Few fixes around type - Restored CSS variable for color on headings, this time with a fallback value - In conjunction, restored and wrapped the default CSS var with a null value check - Split headings and paragraphs docs in Reboot, elaborated on them * Restyle custom details > summary element in docs * Rewrite some migration docs * fix form checks * Fix up some navbar styling, tweak docs callout * Fix select images, mostly for validation styling * Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs * Update site/content/docs/5.2/components/scrollspy.md Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Apply suggestions from code review Co-authored-by: Julien Déramond <julien.deramond@orange.com> * mention form control css vars in migration guide * Tweak grid and flex docs background examples * clarify some docs * fix some more things Co-authored-by: Julien Déramond <juderamond@gmail.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>
2022-11-28 22:30:26 -08:00
</div>
<button type="button" class="btn btn-primary position-relative">
Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
</button>
{{< /example >}}
You can use these classes with existing components to create new ones. Remember that you can extend its functionality by adding entries to the `$position-values` variable.
{{< example class="bd-example-position-examples" >}}
<div class="position-relative m-4">
Rework progress bar markup and styles (#36831) * Rework progress bar markup and styles Logically moves the various `role` and `aria-` attributes to the `.progress` element itself, leaving the `.progress-bar` to be used purely for the visual presentation. This fixes the problem #36736 that in certain browser/AT combinations, zero-value/zero-width progress bars are completely ignored and not announced. For multiple/stacked progress bars, this PR introduces a new wrapper and class `.progress-stacked`, to accommodate for the fact that with the more logical structure above, we need full `.progress` elements with child `.progress-bar` elements, and can't get away with the fudge we had before of having a single `.progress` with multiple `.progress-bar`s. Note that the old markup structures still work with this change, so this could be considered a non-breaking change - though one we definitely want to highlight as it's more accessible (as it now guarantees that zero-value/zero-width progress bars, whether on their own or as part of a multi/stacked bar, are actually announced) * Add a note about progress bar change in migration guide * Add notes with old markup examples and explanation * Fix bundlewatch * Update site/content/docs/5.2/components/progress.md Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Reintroduce deleted styles Turns out they're needed for correct positioning of text inside progress bar * Move changes in markup to Migrationg guide, link to that from top of progress page, rewrite some content * Fix typo in callout * Clarify "Sizing" section * Remove redundant "now" Co-authored-by: Julien Déramond <julien.deramond@orange.com> Co-authored-by: Julien Déramond <juderamond@gmail.com> Co-authored-by: Mark Otto <markdotto@gmail.com> Co-authored-by: Mark Otto <markd.otto@gmail.com>
2022-11-29 07:07:48 +00:00
<div class="progress" role="progressbar" aria-label="Progress" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="height: 1px;">
<div class="progress-bar" style="width: 50%"></div>
</div>
<button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
<button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
<button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button>
</div>
{{< /example >}}
## CSS
### Sass maps
Default position utility values are declared in a Sass map, then used to generate our utilities.
{{< scss-docs name="position-map" file="scss/_variables.scss" >}}
### Sass utilities API
Position utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
{{< scss-docs name="utils-position" file="scss/_utilities.scss" >}}