How to make links in <NavBar> float right using react-boostrap-CodePudding

I would like all the elements nested inside of the first Nav tag to be on the left side of the NavBar, and all in the second Nav tag to float right. How can I achieve this using react Bootstrap?

I tried doing Nav className="float-right" on the second Nav tag but it didn't work. I also tried className="ml-auto".

          <Nav>
            <Nav.Link>
              {" "}
              <Link
                to="/booklets"
                className="nav-link"
                onClick={() => setExpanded(false)}
              >
                Booklets
              </Link>
            </Nav.Link>
            <Nav.Link>
              {" "}
              <Link
                to="/form"
                className="nav-link"
                onClick={() => setExpanded(false)}
              >
                Upload New Booklet
              </Link>
            </Nav.Link>
            <Nav.Link>
              {" "}
              <Link
                to="/about"
                className="nav-link"
                onClick={() => setExpanded(false)}
              >
                About
              </Link>
            </Nav.Link>
          </Nav>
          <Nav>
            <Nav.Link>
              {" "}
              <Link
                to="/login"
                className="nav-link"
                onClick={() => {
                  setExpanded(false);
                  currentUser && logout();
                }}
              >
                {currentUser ? "Logout" : "Login"}
              </Link>
            </Nav.Link>
            <Nav.Link>
              {" "}
              <Link
                to="/register"
                className="nav-link"
                onClick={() => setExpanded(false)}
              >
                {!currentUser ? "Register" : ""}
              </Link>
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>

CodePudding user response：

Assuming that the direct parent of the two <Nav> is <Navbar.Collapse>, perhaps try style the parent to have it place the items each on one side, with flex display.

Example with Bootstrap classes:

<Navbar.Collapse className="d-flex justify-content-between">

Example with inline styles:

<Navbar.Collapse style={{ display: 'flex', justifyContent: 'space-between' }}>