Progress bar with react-bootstrap is not showing up

user_4033050 0
Viewed 2929

I am trying to add a Progress bar used as a review, it's really strange because nothing is displayed.

I try to just copy/paste examples from react-bootstrap and it's not working at all. I try also the material-ui one but the same things...

enter image description here

I do not understand why, I am not using it as a weird way.

<Col>
                        <Row className="review-summary">
                            <p> 5 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                        <Row className="review-summary">
                            <p> 4 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                        <Row className="review-summary">
                            <p> 3 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                        <Row className="review-summary">
                            <p> 2 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                        <Row className="review-summary">
                            <p> 1 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                    </Col>

The css is :

.review-summary {
    display: inline-flex;
}

.review-summary p {
    font-family: Source Sans Pro;
    font-size: 20px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.6;
    letter-spacing: normal;
    text-align: left;
    color: #ff7255;
}

.review-summary-progress {
    color: #ff7255;
}

Any idea why nothing is displayed? I tried as well to move the progress bar elsewhere but same things...

react-bootstrap reactjs css
3 Answers

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

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

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>
user_135994670

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.

user_117115050
Related