React-bootstrap: `NavBar` that has `Nav` with `fill` flag is not working correctly

Question

As a title says, I want my NavBar to extend the full available width, so I add a fill flag to Nav in NavBar component.

  <Navbar bg="light" expand="lg">
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav fill className="mr-auto">
          <Nav.Link href="/">Home</Nav.Link>
          <Nav.Link href="/news">News</Nav.Link>
          <Nav.Link href="/ship-schedule">Ship Schedule</Nav.Link>
          <Nav.Link href="/media-sponsor">Media Sponsor</Nav.Link>
          <Nav.Link href="/contacts">Contacts</Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>

But it isn't working, the Nav.Link components are still left aligned.

How can I make those Nav.Link components fill the width of the Nav.Bar component.

Answer 1

After reading Bootstrap API, to solve this problem, I have to add two css classes to Nav component.

...
<Nav className="w-100 nav-justified">
...

Remove mr-auto class, add two classes w-100 and nav-justified . Then for each Nav.Link component, wrap it into a Nav.Item component, like this:

...
<Nav.Item>
  <Nav.Link href="/">Home</Nav.Link>
</Nav.Item>
...