Center Align NavItem in React Bootstrap - html

Question

I've been at this for ages and can't seem to work out how to do it. At the moments the NavItem's in my NavBar are aligned to the left. I want them centered. I have tried reading the documentation here https://react-bootstrap.github.io/components/navs/ but it doesn't work.
Here is my Navbar:
<div className="container">
<Navbar collapseOnSelect>
<Navbar.Collapse>
<Nav variant="tabs" defaultActiveKey="/home">
<NavItem>
<NavLink to="/newSite/details">Details</NavLink>
</NavItem>
<NavItem>
<NavLink to="/newSite/tours">Tours</NavLink>
</NavItem>
<NavItem>
<NavLink to="/newSite/pois">POIs</NavLink>
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>

Answer 1

Make sure to add className="justify-content-center" in your Nav opening tag. If you're trying to center your Nav Items within a Navbar and Navbar.Collapse, add an inline style with flex: 1.
<Navbar collapseOnSelect expand="lg">
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="justify-content-center" style={{ flex: 1}}>
<Nav.Item>
<Nav.Link href="/home">Home</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link href="/home">Collection</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link href="/home">Contact</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link href="/home">Blog</Nav.Link>
</Nav.Item>
</Nav>
</Navbar.Collapse>
</Navbar>
Check out the "Alignment and orientation" section in the React Bootstrap Documentation. - https://react-bootstrap.github.io/components/navs/