CSS Code don’t work on react.js centering width

Hi guys so I’m trying to create an web application using react-bootstrap and I wanted … Read more CSS Code don’t work on react.js centering width

Hi guys so I’m trying to create an web application using react-bootstrap and I wanted to change the width of my row and center it. I already make the css and js file but I cannot center the row. I tried moving my code to codesandbox and it work just fine. anyone know why ?

My code:

            <Container fluid>
                <Row className="roomfac fontReg">
                    <Col lg={3} className="text-center">
                       <img src="./Images/logofridge.png" alt="Logo 1"/>
                       <h3 className="fontSB">Fridge</h3>
                    </Col>

                    <Col lg={3} className="text-center">
                       <img src="./Images/logoAC.png" alt="Logo 2"/>
                       <h3 className="fontSB">AC</h3>
                    </Col>

                    <Col lg={3} className="text-center">
                       <img src="./Images/logowifi2.png" alt="Logo 3"/>
                       <h3 className="fontSB">Wifi</h3>
                    </Col>

                    <Col lg={3} className="text-center">
                       <img src="./Images/logotv.png" alt="Logo 4"/>
                       <h3 className="fontSB">TV</h3>
                    </Col>
                </Row>
            </Container>

My CSS Code:

.roomfac {
    display: flex;
    width: 60%;
    justify-content: center;
    margin: auto;
}

Source: CSS – Stack Overflow



Leave a Reply

Your email address will not be published. Required fields are marked *