Is it possible to center the React Bootsrap ProgressBar's label?

Question

I'm working with React-Bootsrap ProgressBar and I notice the component aligns its label based on its value: progress-bar example

I was wondering if it was possible to center the label regardless its value, like this: (random example)

My component:

<ProgressBar
    now={....}
    label={....}
    className={....}
/>

Result on browser dev tools:

<div class="..... progress">
    <div role="progressbar" class="progress-bar" aria-valuenow="40" aria-valuemin="0" aria-    valuemax="100">
        dummy
    </div>
</div>

I tried styling the progress and progress-bar classes, but I couldn't style the text inside

Answer 1

Just for the record, I created an issue on react-boostrap GitHub about this subject: https://github.com/react-bootstrap/react-bootstrap/issues/6741

Basically, there is no "official" method to achieve this (eg: by setting a parameter or stylying it). So the workaround is to put the label on a div inside the ProgressBar component.

Eg:

<ProgressBar className="position-relative">
  <div className="position-absolute d-flex justify-content-center w-100 text-danger">25%</div>
  <ProgressBar striped variant="success" now={25} key={1} />
</ProgressBar>