Bootstrap: Center elements

Bootstrap: 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-md-center class name in Row.
className="justify-content-md-center"
1 of 3
Variable width content
3 of 3

2222

1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3

333333

1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3

Center elements Vertically

Vertically: Center DIV in Col vertically

<Container fluid={true}>
    <Row>
        <Col className='d-flex align-items-center'><HeroBenefits accId={data.accId}/></Col>
        <Col><HeroExample domain={data.domain}/></Col>
    </Row>
</Container>