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;
}
CodePudding user response:
Try this:
.roomfac{
display: flex;
width: 60%;
justify-content:center
margin:0 auto;
}
CodePudding user response:
Try this CSS for your container to be centered.
.roomfac {
display: flex;
width: 100%;
max-width: 60%;
margin: 0 auto;
justify-content: center;
}