CODEWITHSUNDEEP
htmlreactjsreact-bootstrap
itaied
itaied

Reputation: 7107

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 enter image description here

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?

Upvotes: 16

Views: 29112

Answers (4)

Dan
Dan

Reputation: 257

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

Upvotes: 5

Ardee Aram
Ardee Aram

Reputation: 4789

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

Upvotes: 21

Ryan Ore
Ryan Ore

Reputation: 1345

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

Upvotes: 15

Raza Ali Poonja
Raza Ali Poonja

Reputation: 1106

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

.exampleDiv {
   float: right;
 }

Upvotes: 0

Related Questions