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> ); }