'How to place nav.link to the right react-bootstrap

I am trying to place the last Nav.Link (logOut) to the right on the nav bar (see picture) without affecting the other nav.links. I have tried with d-flex and so on but it does not work. What to do in the specific nav.link for getting it to stay right, and still included in the Navbar.collapse?

import "./NavBar.css"
import '@fortawesome/fontawesome-free/css/all.min.css';
export const NavBar = () =>{
    return (
<Navbar className="nav-bar" expand="lg" sticky="top">
  <Container>
    <Navbar.Brand href="#home">Scancar</Navbar.Brand>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
     <Navbar.Collapse id="basic-navbar-nav"> 
      <Nav className="ml-auto">    
          
            <Nav.Link href="find">Find booking</Nav.Link>
            <Nav.Link href="book">Book</Nav.Link>
            <Nav.Link href="pricing">Overview</Nav.Link>
            <Nav.Link href="pricing">Release</Nav.Link>
            <Nav.Link href="pricing">Request</Nav.Link>    
            <Nav.Link href="logOut"> <i className="fas fa-sign-out-alt"></i> </Nav.Link>     
            
      </Nav>

    </Navbar.Collapse> 
   
  </Container>
</Navbar>    
   
    );
}

See the navbar

cssreactjsjsxnavbar


Solution 1:[1]

You can add ms-auto

<Nav.Link href="logOut" className="ms-auto"> <i className="fas fa-sign-out-alt"></i> </Nav.Link>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Lucas Hubert

Related Questions