React-Bootstrap pull right navbar

Question

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?

Yes it did nothing.. I have tried adding `pullRight` to every element in the above code. — itaied, Dec 04 '15 at 09:12
interesting. [documentation](https://react-bootstrap.github.io/components.html#navs) says that it should be applied on `Nav` elements. — Tahir Ahmed, Dec 04 '15 at 09:14
can you update your code in this fiddle https://jsfiddle.net/t9sf5u9n/ — Pardeep Dhingra, Dec 04 '15 at 09:15
I don't know how to add the react components, since I'm also using `babel` and `webpack`.. — itaied, Dec 04 '15 at 09:31
In my case, I need to set `Nav` style. Check this [answer](https://stackoverflow.com/a/55392516/911408). — Vladimir Vlasov, Mar 28 '19 at 07:54

score 21 · Answer 1 · answered Sep 04 '19 at 03:01

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

score 15 · Answer 2 · answered Mar 05 '16 at 16:01

15

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>
)}

answered Mar 05 '16 at 16:01

Ryan Ore

1,315
17
23

I tried doing that, but my resulting page looks like [this](https://imgur.com/gallery/LvDfja8). Any idea why that could be the case? I'm pretty sure I don't have any CSS that could be messing with the position... – pfincent Dec 31 '18 at 16:37
Sorry @pfincent , I think I'd need to see your code, or a live link to the page. – Ryan Ore Jan 02 '19 at 18:57
4

`pullRight` doesn't work for me, but `className="ml-auto"` did. Found the solution here: https://stackoverflow.com/a/54684784/95552 – Ardee Aram Sep 04 '19 at 02:58
I think `Menu Item` is the correct syntax. – Jacob Nelson Jan 24 '20 at 08:08

Dan · Answer 3 · 2019-11-19T00:26:39.550

5

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">

edited Nov 19 '19 at 00:26

answered Feb 14 '19 at 07:04

Dan

257
3
12

2

`pullRight` doesn't work for me, but `className="ml-auto"` did. Found the solution here: stackoverflow.com/a/54684784/95552 – Ardee Aram Sep 04 '19 at 02:59
Well, you point to the same link I did. Not sure why this is necessary .... – Dan Nov 16 '19 at 02:32

score 0 · Answer 4 · answered Dec 04 '15 at 09:11

0

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

.exampleDiv {
   float: right;
 }

answered Dec 04 '15 at 09:11

Raza Ali Poonja

1,086
8
16

It also doesn't work well. It shrinks the `exampleDiv` to the right and put each element in a different line. – itaied Dec 04 '15 at 09:18
can you create a jsfiddle – Raza Ali Poonja Dec 04 '15 at 09:25

React-Bootstrap pull right navbar

4 Answers4