Center elements with Bootstrap

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>

Dump

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