title: React-Bootstrap pull right navbar
body: <p>I'm using <code>react-bootstrap</code> for styling my website. I want to add <code>Navbar</code> where all of the elements are mirrored to the right.</p>
  
  <pre><code>export default class XNavbar extends React.Component {
    render() {
  return (
    &lt;Navbar inverse fluid &gt;
  
      &lt;Navbar.Header&gt;
        &lt;Navbar.Brand&gt;
          &lt;a href="#"&gt;Brand&lt;/a&gt;
        &lt;/Navbar.Brand&gt;
        &lt;Navbar.Toggle /&gt;
      &lt;/Navbar.Header&gt;
  
      &lt;Navbar.Collapse&gt;
        &lt;Nav&gt;
          &lt;NavItem eventKey={1} href="#"&gt;Hello&lt;/NavItem&gt;
          &lt;NavItem eventKey={2} href="#"&gt;World&lt;/NavItem&gt;
        &lt;/Nav&gt;
      &lt;/Navbar.Collapse&gt;
  
    &lt;/Navbar&gt;
  )}
  }
  </code></pre>
  
  <p>The result is
  <a href="https://i.stack.imgur.com/3RTxQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/3RTxQ.png" alt="enter image description here"></a></p>
  
  <p>But what I actually want it to be</p>
  
  <pre><code>[                                                           World Hello Brand ]
  </code></pre>
  
  <p>I tried using <code>pullRight</code> on the <code>&lt;Navbar</code> but it didn't work. I also added <code>&lt;html dir="rtl"&gt;</code>, but this also didn't help. How can I do it?</p>