Center navigation bar

  • Set <Nav className="mx-auto" >

  • https://stackoverflow.com/a/61970564

    import Nav from 'react-bootstrap/Nav';
    import Navbar from 'react-bootstrap/Navbar';
    
    import Container from 'react-bootstrap/Container';
    
    export default function Footer() {
        return (
            <Navbar fixed="bottom">
                <Container>
                    <Nav className="mx-auto" >
                        <Nav.Link href={'/about'}>About</Nav.Link>
                        <div>{``}</div>
                        <Nav.Link href={'/privacy'}>Privacy</Nav.Link>
                        <div >{``}</div>
                        <Nav.Link href={'/blog'}>Blog</Nav.Link>
                    </Nav>
                </Container>
            </Navbar>
        );
    }
    

Center vertically div inside Nav.

  • Set <div className='d-flex align-items-center'>

    import Nav from 'react-bootstrap/Nav';
    import Navbar from 'react-bootstrap/Navbar';
    
    import Container from 'react-bootstrap/Container';
    
    export default function Footer() {
        return (
            <Navbar fixed="bottom">
                <Container>
                    <Nav>
                        <Nav.Link href={'/about'}>About</Nav.Link>
                        <div className='d-flex  align-items-center'>{``}</div>
                        <Nav.Link href={'/privacy'}>Privacy</Nav.Link>
                        <div className='d-flex  align-items-center'>{``}</div>
                        <Nav.Link href={'/blog'}>Blog</Nav.Link>
                    </Nav>
                </Container>
            </Navbar>
        );
    }