score:0

Try updating your dependency. Either using npm or yarn.

npm update react-bootstrap@latest --save-dev

Another way to debug is set your now value which is a number that displays current progress of bar so ex. now={50}:

<ProgressBar striped variant="success" now={50} active="true" label=`${uploadPercentage}%`} value={`${uploadPercentage}`}/>

More details.

score:1

I ran into the same issue and placing the progress bar component inside of a column is what fixed it for me.

So it doesn't work like this:

<Row>
    <ProgressBar />
</Row>

But it works like this:

<Row>
   <Col>
       <ProgressBar />
   </Col>
</Row>

score:1

For me, it was the missing import in my component. Try adding this in your imports:

import 'bootstrap/dist/css/bootstrap.min.css';

Related Query

More Query from same tag