How to center a container in react-bootstrap?

Question

I'm developing a website using react-bootstrap, and I have a container whose width needs to be changed to 60%, and still be centered. I changed the width, but I can't find a way to center the container. How can I do this?

Here's my code:

import {Row, Col, Container, Button} from "react-bootstrap"
import '../CSS/Room.css'

const Room = () => {
    return (
        <>
            <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>
        </>
    )
}

export default Room

And here's my CSS:

.roomfac {
    display: flex;
    widtH: 60%;
    margin: auto;
}

Prashant · Accepted Answer · 2021-10-13 08:36:24Z

3

Try this CSS for your container to be centered.

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

edited Oct 13, 2021 at 8:36

answered Oct 13, 2021 at 7:48

Prashant

7854 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MonoWolfChrome · Accepted Answer · 2021-10-13 08:03:47Z

0

Try this:

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

edited Oct 13, 2021 at 8:03

MonoWolfChrome

2162 silver badges16 bronze badges

answered Oct 13, 2021 at 7:45

Manfre

6846 gold badges18 silver badges36 bronze badges

4 Comments

Manfre Over a year ago

look again the edited answer please

MonoWolfChrome Over a year ago

Yeah, now it's better.

Kim San Over a year ago

didn't work also

Manfre Over a year ago

this is not possible..can you share the fontReg class and where the Room compenent renders ? cause with those attributes in codesandbox is working

Collectives™ on Stack Overflow

How to center a container in react-bootstrap?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related