Progress bar with react-bootstrap is not showing up

Question

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

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

Answer 1

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

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