Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive.
Therefore, <Container><Row><Col>
uses flexbox, flexbox and flexbox.
<Card style={{ width: '18rem' }} className='mx-auto'>
<Card.Title><img className='mx-auto' src="https://placehold.co/25x25" /></Card.Title>
<Container className="text-center">
<Row><h2>Happy customers</h2></Row>
</Container>
<Alert variant="danger" className="text-center">
Error: There is no camera!
</Alert>
Set justify-content-center class name in Row tag, i.e. <Row className="justify-content-center">
.
Then, set Col width. If you don't specify how much width <Col>
should take, it will take full width.
And, you will never be able to center. Therefore, at least, set it to use natural width of their content(auto
).
i.e. xs="auto" sm="auto"
(less or more than 576px = all breakpoints)
However, you will notice that the content of the <Row>
is not center. See the last section where everything is centered.
🎯
<Container fluid={true}>
<Row className="justify-content-center">
<Col style={{backgroundColor: "Lime"}} sm="auto">
<div>In Row, set justify-content-center class name.</div>
<div>In Col, set column width xs="auto" sm="auto"</div>
</Col>
<Col style={{backgroundColor: "cyan"}} sm="auto">
🎯
</Col>
</Row>
<Row>
<Col style={{backgroundColor: grays[0]}}>1 of 3</Col>
<Col style={{backgroundColor: grays[1]}}>(2) No width defined on this row</Col>
<Col style={{backgroundColor: grays[2]}}>3 of 3</Col>
</Row>
</Container>
To vertically center non-inline content (like <div>
s and more), use our flex box utilities.
The content of the 1st cell is center vertically.
Add className='d-flex align-items-center'
in <Col>
<Container fluid={true}>
<Row>
<Col style={{ backgroundColor: 'lime' }} className='d-flex align-items-center'><img src="https://placehold.co/50x50" /></Col>
<Col style={{ backgroundColor: '#EBEBE4' }}><img src="https://placehold.co/100x100" /></Col>
</Row>
</Container>
<Container>
<Row className="justify-content-center" xs={1} sm={1} md={2} lg={3} xl={4}>
<Col style={{ backgroundColor: 'cyan' }} className='m-2'>
<img src="https://placehold.co/100x150" />
</Col>
<Col style={{ backgroundColor: 'lime' }} className='m-2'>
<img src="https://placehold.co/75x75" />
</Col>
<Col style={{ backgroundColor: 'pink' }} className='m-2'>
<img src="https://placehold.co/100x150" />
</Col>
<Col style={{ backgroundColor: 'cyan' }} className='m-2'>
<img src="https://placehold.co/175x100" />
</Col>
<Col style={{ backgroundColor: 'lime' }} className='m-2'>
<img src="https://placehold.co/100x250" />
</Col>
<Col style={{ backgroundColor: 'pink' }} className='m-2'>
<img src="https://placehold.co/300x150" />
</Col>
<Col style={{ backgroundColor: 'red' }} className='m-2'>
<img src="https://placehold.co/270x150" />
</Col>
</Row>
</Container>
<Container>
<Row className="justify-content-center" xs={1} sm={1} md={2} lg={3} xl={4}>
<Col style={{ backgroundColor: 'cyan' }} className='m-2 d-flex align-items-center justify-content-center'>
<img src="https://placehold.co/100x150" />
</Col>
<Col style={{ backgroundColor: 'lime' }} className='m-2 d-flex align-items-center justify-content-center'>
<img src="https://placehold.co/75x75" />
</Col>
<Col style={{ backgroundColor: 'pink' }} className='m-2 d-flex align-items-center justify-content-center'>
<img src="https://placehold.co/100x150" />
</Col>
<Col style={{ backgroundColor: 'cyan' }} className='m-2 d-flex align-items-center justify-content-center'>
<img src="https://placehold.co/175x100" />
</Col>
<Col style={{ backgroundColor: 'lime' }} className='m-2 d-flex align-items-center justify-content-center'>
<img src="https://placehold.co/100x250" />
</Col>
<Col style={{ backgroundColor: 'pink' }} className='m-2 d-flex align-items-center justify-content-center'>
<img src="https://placehold.co/300x150" />
</Col>
<Col style={{ backgroundColor: 'red' }} className='m-2 d-flex align-items-center justify-content-center'>
<img src="https://placehold.co/270x150" />
</Col>
</Row>
</Container>
=================
https://www.tutorialrepublic.com/faq/how-to-center-buttons-in-bootstrap.php#:~:text=Answer%3A%20Use%20the%20text%2Dcenter,other%20inline%20elements%20in%20Bootstrap.
You can simply use the built-in class .text-center on the wrapper element to center align buttons or other inline elements in Bootstrap.
<Container>
<Row className='justify-content-center' xs={1} sm={1} md={2} lg={3} xl={4}>
<Col xs="auto" sm="auto" className='text-center'><Button variant="primary" onClick={handleCompressAndDownload}>Save All</Button></Col>
</Row>
</Container>
============
https://stackoverflow.com/a/56192888
you can use flex to make items center i.e
{
display:flex;
justify-content:center;
align-item:center
}