Center elements with Bootstrap

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.

Center elements Horizontally

Horizontally: Center cards

https://stackoverflow.com/a/42559382
mx-auto (auto x-axis margins) will center inside display:flex elements that have a defined width, (%, vw, px, etc..). Flexbox is used by default on grid columns, so there are also various centering methods.

<Card style={{ width: '18rem' }} className='mx-auto'>

Horizontally: Center img in Card.Title

<Card.Title><img className='mx-auto' src="https://placehold.co/25x25" /></Card.Title>

Horizontally: Center text in Container

<Container className="text-center">
    <Row><h2>Happy customers</h2></Row>
</Container>

Horizontally: Center text in Alert

<Alert variant="danger" className="text-center">
    Error: There is no camera!
</Alert>

Horizontally: Center Row in Container

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.

🎯

In Row, set justify-content-center class name.

In Col, set column width xs="auto" sm="auto"

🎯

1 of 3

(2) No width defined on this row

3 of 3

See codes

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

Center elements Vertically

To vertically center non-inline content (like <div>s and more), use our flex box utilities.

Vertically: Center element inside Col vertically

The content of the 1st cell is center vertically.

Add className='d-flex align-items-center' in <Col>

See codes

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

Combine everything together to center

Same cell size per row

Same cell size per row but each row's height is different.
Each cell has different image size.

See codes

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

Same cell size per row and center cell content

Same cell size per row but each row's height is different.
Each cell has different image size.
Center image in each cell.

See codes

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