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>

Please provide a minimal working example. Also you code seems not to be the same with your pictures. Your "display image" is in Offcanvas for some reason, not in the Navbar. Please provide the correct code. — Igor Gonak, May 04 '22 at 21:16
Make sure the container is full width. best guess is that your container is only going halfway and then the image is right-aligning to that. — JBatstone, May 04 '22 at 21:18

score 1 · Accepted Answer · answered May 05 '22 at 11:01

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!

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

1 Answers1