Source:  Twitter logo

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?

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

21 users liked answer #0dislike answer #021
Ardee Aram profile pic
Ardee Aram

In case you haven't already figured this out, or someone else stumbles on it. All you should have to do is add the pullRight prop to the actual Nav component. The result should be a Brand Logo in the left, and the navigation pulled to the right.

return (
  <Navbar inverse fluid >

    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">Brand</a>
      </Navbar.Brand>
      <Navbar.Toggle />
    </Navbar.Header>

    <Navbar.Collapse>
      <Nav pullRight>
        <NavItem eventKey={1} href="#">Hello</NavItem>
        <NavItem eventKey={2} href="#">World</NavItem>
      </Nav>
    </Navbar.Collapse>

  </Navbar>
)}
15 users liked answer #1dislike answer #115
Ryan Ore profile pic
Ryan Ore

Actually, according to the documentation of Bootstrap React pullRight should do it. But I wasn't able to realize it either. I found a working solution which I described here. Just use <Nav className="ml-auto">

5 users liked answer #2dislike answer #25
Dan profile pic
Dan

You can put your elements inside a div and than float div to right by this css property

.exampleDiv {
   float: right;
 }
0 users liked answer #3dislike answer #30
Raza Poonja profile pic
Raza Poonja

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).