diff --git a/scss/_progress.scss b/scss/_progress.scss index 1bfafb58f..05da791fa 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -8,7 +8,8 @@ } // scss-docs-end progress-keyframes -.progress { +.progress, +.progress-stacked { // scss-docs-start progress-css-vars --#{$prefix}progress-height: #{$progress-height}; @include rfs($progress-font-size, --#{$prefix}progress-font-size); @@ -30,9 +31,6 @@ } .progress-bar { - display: flex; - flex-direction: column; - justify-content: center; overflow: hidden; color: var(--#{$prefix}progress-bar-color); text-align: center; @@ -46,6 +44,14 @@ background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height); } +.progress-stacked > .progress { + overflow: visible; +} + +.progress-stacked > .progress > .progress-bar { + width: 100%; +} + @if $enable-transitions { .progress-bar-animated { animation: $progress-bar-animation-timing progress-bar-stripes; diff --git a/site/content/docs/5.2/components/progress.md b/site/content/docs/5.2/components/progress.md index aa793683b..0fda063b4 100644 --- a/site/content/docs/5.2/components/progress.md +++ b/site/content/docs/5.2/components/progress.md @@ -11,35 +11,36 @@ toc: true Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don't use [the HTML5 `` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them. - We use the `.progress` as a wrapper to indicate the max value of the progress bar. -- We use the inner `.progress-bar` to indicate the progress so far. -- The `.progress-bar` requires an inline style, utility class, or custom CSS to set their width. -- The `.progress-bar` also requires some `role` and `aria` attributes to make it accessible, including an accessible name (using `aria-label`, `aria-labelledby`, or similar). +- The `.progress` wrapper also requires a `role="progress"` and `aria` attributes to make it accessible, including an accessible name (using `aria-label`, `aria-labelledby`, or similar). +- We use the inner `.progress-bar` purely for the visual bar and label. +- The `.progress-bar` requires an inline style, utility class, or custom CSS to set its width. +- We provide a special `.progress-stacked` class to create multiple/stacked progress bars. Put that all together, and you have the following examples. {{< example >}} -
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
{{< /example >}} Bootstrap provides a handful of [utilities for setting width]({{< docsref "/utilities/sizing" >}}). Depending on your needs, these may help with quickly configuring progress. {{< example >}} -
-
+
+
{{< /example >}} @@ -48,8 +49,8 @@ Bootstrap provides a handful of [utilities for setting width]({{< docsref "/util Add labels to your progress bars by placing text within the `.progress-bar`. {{< example >}} -
-
25%
+
+
25%
{{< /example >}} @@ -58,11 +59,11 @@ Add labels to your progress bars by placing text within the `.progress-bar`. We only set a `height` value on the `.progress`, so if you change that value the inner `.progress-bar` will automatically resize accordingly. {{< example >}} -
-
+
+
-
-
+
+
{{< /example >}} @@ -71,17 +72,17 @@ We only set a `height` value on the `.progress`, so if you change that value the Use background utility classes to change the appearance of individual progress bars. {{< example >}} -
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
{{< /example >}} @@ -91,13 +92,19 @@ Use background utility classes to change the appearance of individual progress b ## Multiple bars -Include multiple progress bars in a progress component if you need. +You can include multiple progress components inside a container with `.progress-stacked` to create a single stacked progress bar. Note that in this case, the styling to set the visual width of the progress bar *must* be applied to the `.progress` elements, rather than the `.progress-bar`s. {{< example >}} -
-
-
-
+
+
+
+
+
+
+
+
+
+
{{< /example >}} @@ -106,20 +113,20 @@ Include multiple progress bars in a progress component if you need. Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color. {{< example >}} -
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
{{< /example >}} @@ -128,8 +135,8 @@ Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gra The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations. {{< example >}} -
-
+
+
{{< /example >}} diff --git a/site/content/docs/5.2/examples/cheatsheet-rtl/index.html b/site/content/docs/5.2/examples/cheatsheet-rtl/index.html index 77accc976..8fed6c745 100644 --- a/site/content/docs/5.2/examples/cheatsheet-rtl/index.html +++ b/site/content/docs/5.2/examples/cheatsheet-rtl/index.html @@ -1388,27 +1388,31 @@ direction: rtl
{{< example show_markup="false" >}} -
-
0%
+
+
0%
-
-
25%
+
+
25%
-
-
50%
+
+
50%
-
-
75%
+
+
75%
-
-
100%
+
+
100%
{{< /example >}} {{< example show_markup="false" >}} -
-
-
+
+
+
+
+
+
+
{{< /example >}}
diff --git a/site/content/docs/5.2/examples/cheatsheet/index.html b/site/content/docs/5.2/examples/cheatsheet/index.html index 5627f8375..b20b72806 100644 --- a/site/content/docs/5.2/examples/cheatsheet/index.html +++ b/site/content/docs/5.2/examples/cheatsheet/index.html @@ -1385,27 +1385,31 @@ body_class: "bg-light"
{{< example show_markup="false" >}} -
-
0%
+
+
0%
-
-
25%
+
+
25%
-
-
50%
+
+
50%
-
-
75%
+
+
75%
-
-
100%
+
+
100%
{{< /example >}} {{< example show_markup="false" >}} -
-
-
+
+
+
+
+
+
+
{{< /example >}}
diff --git a/site/content/docs/5.2/utilities/position.md b/site/content/docs/5.2/utilities/position.md index 5a6e849cc..80839ef66 100644 --- a/site/content/docs/5.2/utilities/position.md +++ b/site/content/docs/5.2/utilities/position.md @@ -106,8 +106,8 @@ You can use these classes with existing components to create new ones. Remember {{< example class="bd-example-position-examples" >}}
-
-
+
+