0

How do you push to the right nav items of a Bootstrap 4 navbar? I tried float-*-right but did not work.

  <nav class="navbar navbar-static-top navbar-dark bg-inverse float-*-right">
  <a class="navbar-brand" href="#">Project name</a>
  <ul class="nav navbar-nav">
    <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="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
  </ul>
</nav>

I need to align the nav items to the right.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
PythonAnywhere
  • 309
  • 1
  • 3
  • 11
  • Some code would be great, so we can see the actual issue – Asons Dec 17 '16 at 22:01
  • 1
    You need 'pull-right' class: http://www.bootply.com/VljzqtNw5S (if such class exists in version 4). – sinisake Dec 17 '16 at 22:20
  • Neither `float-right` or `pull-right` work because Bootstrap 4 now uses flexbox. [Now ml-auto is used to push nav items to the right](https://stackoverflow.com/questions/41513463/bootstrap-4-align-navbar-item-to-the-right) – Carol Skelly Feb 15 '18 at 18:19

2 Answers2

3

Add 'float-xs-right' class to the ul

<ul class="nav navbar-nav float-xs-right">

You can remove 'float-*-right' from the containing nav tag since it's not doing anything there

http://www.bootply.com/OnvcimHYD7

toast
  • 660
  • 1
  • 5
  • 12
0

Update 2018

float-right will no longer work because the Bootstrap 4 Navbar uses flexbox. The auto-margin class (ie:ml-auto) should be used instead.

See: Bootstrap 4 align navbar items to the right

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624