Can't align image to the right in navbar using react-bootstrap

Question

Can't Align right this Display Image in the navbar somehow. Follow documents and use many react-bootstrap properties like justify-content-right, text-align, pull right. But can't manage to do it.

But it worked without display image. I tried same properties but it stick to the left.

I want to move it to the right side.

Full Navbar Code

    /* Display User Code starts here. I want to move it to right */
                    <Nav>
                      {user ? (
                        <>
                          {" "}
                          <NavDropdown
                            className="ms-auto"
                            eventKey={1}
                            title={
                              <img
                                className="user_image"
                                src="https://i.ibb.co/LJ2BGT2/121105442-creative-illustration-of-default-avatar-profile-placeholder-isolated-on-background-art-des.webp"
                                alt="user pic"
                              />
                            }
                            id="basic-nav-dropdown"
                          >
                            <NavDropdown.Item to="/addproduct">
                              Add Product
                            </NavDropdown.Item>
                            <NavDropdown.Item to="/manageproduct">
                              Manage Product
                            </NavDropdown.Item>
                            <NavDropdown.Item
                              to="/order"
                              className="justify-content-center"
                            >
                              Order
                              <Badge className="mx-2 mt-2 " bg="dark">
                                9
                              </Badge>
                              <span className="visually-hidden">
                                unread messages
                              </span>
                            </NavDropdown.Item>
                            <NavDropdown.Item divider />
                            <NavDropdown.Item eventKey={1.3}>
                              <Button
                                variant="primary"
                                size="sm"
                                className="mx-2"
                                onClick={handleSignOut}
                              >
                                Sign Out
                              </Button>
                            </NavDropdown.Item>
                          </NavDropdown>{" "}
                        </>
                      ) : (
                        <>
                          {" "}
                          <CustomLink to="/login">Login</CustomLink>
                          <CustomLink to="/register">Register</CustomLink>
                        </>
                      )}
                    </Nav>
                

Answer 1

Using slightly stripped down code, there's two ways you can do it:

The first:

        <Navbar>
            <Navbar.Brand>Brand text</Navbar.Brand>
            <Nav>
                <Nav.Item>
                    <Nav.Link as={Link} to='/'>
                        Home
                    </Nav.Link>
                </Nav.Item>
            </Nav>
            <Nav className='ms-auto'>
                <Nav.Item>
                    <Nav.Link as={Link} to='/login'>
                        Login
                    </Nav.Link>
                </Nav.Item>
            </Nav>
        </Navbar>

In this instance the Navbar component is fullwidth and we wrap our two navs in their own Nav components and give the user nav className='ms-auto' to push it to the right.

Second option:

         <Navbar>
            <Navbar.Brand>Brand text</Navbar.Brand>
            <Nav className='flex-grow-1'>
                <Nav.Item>
                    <Nav.Link as={Link} to='/'>
                        Home
                    </Nav.Link>
                </Nav.Item>
                <Nav.Item className='ms-auto'>
                    <Nav.Link as={Link} to='/login'>
                        Login
                    </Nav.Link>
                </Nav.Item>
            </Nav>
        </Navbar>

In this scenario you use the one Nav component, but as per @JBatstone 's comment, you need to ensure the Nav is stretched to full-width by giving it a className='flex-grow-1' and the Nav.Item you want to push to the right gets a className='ms-auto'.

In both cases you'll achieve the result you're after, and can use Dropdown components or whatever you like!