Progress bar text doesnt handle the 0% case

[bdirito]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

If you create a progress bar where the progress is not very far (ie 0%) the inner descriptive text will not be displayed.

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">I want to be seen!</div>
</div>

This has come up before. Most recently(?) it was https://github.com/twbs/bootstrap/issues/24538 (fixed for 4.0 release).

As shown below with the test cases the issue where text will not display appears to have been introduced via 4.4.0.

Reduced test cases

This issue can be seen in the current bootstrap (5.2.3) https://jsfiddle.net/apw74tx9/2/

I did some looking at older versions of bootstrap and this appears to have been working in 4.3.1 https://jsfiddle.net/3c6uL5hj/

But not the 4.4.0 release https://jsfiddle.net/6pfuokv7/1/

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.2.3

[alenap93]

it was a fix for IE: https://github.com/twbs/bootstrap/pull/29629. Now, in v5, we dropped IE 10 and 11 support, therefore i think that we can revert that commit.

[khalyomede]

Hello everyone, I have the same issue and I would like to show how it currently renders on Bootstrap 5.2 below. If the text could be always displayed in the middle, and with the right color (if on gray background: black, if on primary background: white) it would be the perfect component!

I tried to play with this set of CSS, using mix-blend-mode for toggling the text color automatically, but the results are not satisfying in all cases:

• When there is 0/N items
• When there is half-n/N items
• When there is N/N items

Current behavior

Expected behavior (hard coded, not dynamic, main issue is mix-blend-mode:

For the hard coded values, I used this set of CSS

The only issue is the color of the text that I put in hard coded, I'd like to find a CSS property to make it black/white depending the background, mix-blend-mode attempt fail for me...

Also I had to wrap the value "0/N" in a span and apply the CSS on this span

position: absolute;
left: 50%;
transform: translateX(-50%);
color: black/white; // <---- hard coded

[Wecros]

I second this. It is annoying not being able to see the text by default...