rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-08 05:54:23 +01:00
Code Issues Actions Packages Releases Activity
Bootstrap/site/content/docs/5.2/utilities/position.md
Patrick H. Lauke 26a3ef1bcb
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-28 23:07:48 -08:00

5.8 KiB
Raw Blame History

layout title description group toc
docs Position Use these shorthand utilities for quickly configuring the position of an element. utilities true

Position values

Quick positioning classes are available, though they are not responsive.

<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" >}}

{{< /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" >}}

{{< /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" >}}

{{< /example >}}

Examples

Here are some real life examples of these classes:

{{< example class="bd-example-position-examples d-flex justify-content-around align-items-center" >}} Mails +99 unread messages

Marker
Alerts unread messages {{< /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" >}}

1 2 3
{{< /example >}}

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" >}}

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" >}}