React-Bootstrap pull right navbar
I'm using react-bootstrap for styling my website. I want to add Navbar where all of the elements are mirrored to the right.
export default class XNavbar extends React.Component {
render() {
return (
<Navbar inverse fluid >
<Navbar.Header>
<Navbar.Brand>
<a href="#">Brand</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">Hello</NavItem>
<NavItem eventKey={2} href="#">World</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
)}
}
The result is
But what I actually want it to be
[ World Hello Brand ]
I tried using pullRight on the <Navbar but it didn't work. I also added <html dir="rtl">, but this also didn't help. How can I do it?
Answer
For those of you, like me, can't get pullRight work, it seems that adding the ml-auto works better.
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link href="#one">One</Nav.Link>
<Nav.Link href="#two">Two</Nav.Link>
</Nav>
</Navbar.Collapse>
Found the solution here: https://stackoverflow.com/a/54684784/95552