how to move Nav.Link in Bootstrap react Header to the right side?

Question

Hi guys so I'm trying to make header for my web page application using React Bootstrap, but I can't separate the logo with the Nav.link (all of them placed on the left side), but I want the Logo to be on the left side meanwhile the other Nav.link on the right side. In normal bootstrap we just have to add justify-content-end on the list but for React Bootstrap it didn't work, can anyone help me with this please ?

Here's my code:

import '../styles/Header.css'
import { Navbar, Nav } from "react-bootstrap"
import { Link } from 'react-router-dom'

function header() {
    return (
        <Navbar className="color-nav" variant="dark" expand="lg">
            <Navbar.Brand as={Link} to={"/"}>Logo will be Here</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="justify-content-end">
                    <Nav.Link as={Link} to={"/facilities"}>Facilities</Nav.Link>
                    <Nav.Link as={Link} to={"/room"}>Room</Nav.Link>
                    <Nav.Link as={Link} to={"/contactus"}>Contact Us</Nav.Link>
                    <Nav.Link as={Link} to={"/bookingroom"}>Book now</Nav.Link>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    )
}

export default header

Answer 1

You forget to add display flex , so without it is not a flexbox . add d-flex , hope will work.