react bootstrap: navbar last item right-hand positioning

Question

I want to use Bootstrap and React to make the same menu as in the top image.

But no matter what alignment you put, you get a menu like on the bottom image.

the current sources looks like this:

 <Navbar expand="sm" bg="light" className="w-50 general_menu">
  <Nav>
   <Nav.Link className="active">Left One</Nav.Link>
   <Nav.Link>Left Two</Nav.Link>
   <Nav.Link>Left Three</Nav.Link>
   <Nav.Link className="border-left pl-2">Right One</Nav.Link>
  </Nav>
</Navbar>

Tell me please, what changes do I have to make to place the navmenu last item as in the top image?

score 2 · Accepted Answer · answered Jun 03 '20 at 13:07

2

Apply css to Right One link: margin-left: auto or add class ml-auto to Last link:

<Nav.Link className="border-left pl-2 ml-auto">Right One</Nav.Link>

answered Jun 03 '20 at 13:07

Muhammad Ali

2,538
2
16
21

did not work :( `` and `` – Zhihar Jun 03 '20 at 15:48
the parent which is wrapping this component should be flex. If it still doesn't work then maybe create a reproducible example on codesandbox and paste the link here. – Muhammad Ali Jun 03 '20 at 16:19
https://repl.it/repls/MotherlyFragrantClass, i use container-fluid `

/div>
`
– Zhihar Jun 03 '20 at 20:47
1

big thanks!!! `
` instead `
`
– Zhihar Jun 03 '20 at 20:57
Note in boostrap 5 you need `ms-auto` in stead of `ml-auto` – Dave Amphlett Nov 16 '22 at 18:14

Pavel Petrovich · Answer 2 · 2020-06-04T05:35:34.470

-1

Use inside left-side navbar css class mr-auto.

<ul class="navbar-nav mr-auto">
  <li class="nav-item active">
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Features</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Pricing</a>
  </li>
</ul>
<span class="navbar-text">
Place your right side element here
</span>

This code get from original Bootstrap Navbar.

edited Jun 04 '20 at 05:35

answered Jun 03 '20 at 13:07

Pavel Petrovich

734
10
9

this code will put all the items to the right, and I only need to put one item to the right and the rest to the left. – Zhihar Jun 03 '20 at 15:50

react bootstrap: navbar last item right-hand positioning

2 Answers2