Rectangle 27 0

Bootstrap 4 navbar items on right side?


<nav class="navbar navbar-toggleable-sm navbar-inverse bg-inverse">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar"     aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Acme</a>
  <div class="collapse navbar-collapse justify-content-between" id="navbar">
    <div class="navbar-nav">
      <a class="nav-item nav-link" href="#">Ball Bearings</a>
      <a class="nav-item nav-link" href="#">TNT Boxes</a>
    </div>
    <div class="navbar-nav">
      <a class="nav-item nav-link" href="#">Logout</a>
    </div>
  </div>
</nav>

I have a working codepen with left- and right-aligned nav links that all collapse into a responsive menu together using .justify-content-between on the parent tag: https://codepen.io/epan/pen/bREVVW?editors=1000

Note
Rectangle 27 0

Bootstrap 4 navbar items on right side?


<nav class="navbar navbar-toggleable-sm navbar-inverse bg-inverse">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar"     aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Acme</a>
  <div class="collapse navbar-collapse justify-content-between" id="navbar">
    <div class="navbar-nav">
      <a class="nav-item nav-link" href="#">Ball Bearings</a>
      <a class="nav-item nav-link" href="#">TNT Boxes</a>
    </div>
    <div class="navbar-nav">
      <a class="nav-item nav-link" href="#">Logout</a>
    </div>
  </div>
</nav>

I have a working codepen with left- and right-aligned nav links that all collapse into a responsive menu together using .justify-content-between on the parent tag: https://codepen.io/epan/pen/bREVVW?editors=1000

Note
Rectangle 27 0

Bootstrap 4 navbar items on right side?


<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <ul class="nav navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
            <ul class="nav navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link on the Right</a>
                </li>
            </ul>
        </div>
    </nav>
</body>

Although your solution works but, we should all agree that whatever solution we use is a workaround, Bootstrap 4 is far from stable and, the rules and naming conventions are constantly changing in way that slows down any development. Thank you for helping us to pass this dilemma until we grab a stable version. UPDATE you should put all classes of navbar-toggleable-* so that the navs don't stack up in all screen sizes.

This should work for alpha 6. The key is the class "mr-auto" on the left nav, which will push the right nav to the right. You also need to add navbar-toggleable-md or it will stack in a column instead of a row. Note I didn't add the remaining toggle items (e.g. toggle button), I added just enough to get it to formatted as requested. Here are more complete examples https://v4-alpha.getbootstrap.com/examples/navbars/.

Note
Rectangle 27 0

Bootstrap 4 navbar items on right side?


<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <ul class="nav navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
            <ul class="nav navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link on the Right</a>
                </li>
            </ul>
        </div>
    </nav>
</body>

Although your solution works but, we should all agree that whatever solution we use is a workaround, Bootstrap 4 is far from stable and, the rules and naming conventions are constantly changing in way that slows down any development. Thank you for helping us to pass this dilemma until we grab a stable version. UPDATE you should put all classes of navbar-toggleable-* so that the navs don't stack up in all screen sizes.

This should work for alpha 6. The key is the class "mr-auto" on the left nav, which will push the right nav to the right. You also need to add navbar-toggleable-md or it will stack in a column instead of a row. Note I didn't add the remaining toggle items (e.g. toggle button), I added just enough to get it to formatted as requested. Here are more complete examples https://v4-alpha.getbootstrap.com/examples/navbars/.

Note
Rectangle 27 0

Bootstrap 4 navbar items on right side?


<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"/>
  <style>
    /* Stackoverflow preview fix, please ignore */
    .navbar-nav {
      flex-direction: row;
    }
    
    .nav-link {
      padding-right: .5rem !important;
      padding-left: .5rem !important;
    }
  </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link">Left Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link">Left Link 2</a>
    </li>
  </ul>
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link">Right Link 1</a>
    </li>
    <li class="navbar-item">
      <a class="nav-link">Right Link 2</a>
    </li>
  </ul>
</nav>
</body>
ml-auto

Create another <ul class="navbar-nav ml-auto"> for the navbar items you want on the right.ml-auto will pull your navbar-nav to the right where mr-auto will pull it to the left.

Please note that pull-*-* has deprecated, use float-*-* instead. float-xs-* seem not working in alpha6 so use float-right

The correct answer is add the class ml-auto to the <ul>

This no longer works in v4.0.0-alpha.6. float-right instead of pull-xs-right also does not work

Note
Rectangle 27 0

Bootstrap 4 navbar items on right side?


<div class="collapse navbar-collapse justify-content-end" id="navbarText">
  <ul class="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="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

In Bootstrap 4 alpha-6 version, As navbar is using flex model, you can use justify-content-end in parent's div and remove mr-auto.

This works like a charm :)

Note
Rectangle 27 0

Bootstrap 4 navbar items on right side?


<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"/>
  <style>
    /* Stackoverflow preview fix, please ignore */
    .navbar-nav {
      flex-direction: row;
    }
    
    .nav-link {
      padding-right: .5rem !important;
      padding-left: .5rem !important;
    }
  </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link">Left Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link">Left Link 2</a>
    </li>
  </ul>
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link">Right Link 1</a>
    </li>
    <li class="navbar-item">
      <a class="nav-link">Right Link 2</a>
    </li>
  </ul>
</nav>
</body>
ml-auto

Create another <ul class="navbar-nav ml-auto"> for the navbar items you want on the right.ml-auto will pull your navbar-nav to the right where mr-auto will pull it to the left.

Please note that pull-*-* has deprecated, use float-*-* instead. float-xs-* seem not working in alpha6 so use float-right

The correct answer is add the class ml-auto to the <ul>

This no longer works in v4.0.0-alpha.6. float-right instead of pull-xs-right also does not work

Note
Rectangle 27 0

Bootstrap 4 navbar items on right side?


<ul class="nav navbar-nav ml-auto">

In version 4, it is easier. Just put a ml-auto class in the ul like so:

This is what seems correct. I didnt need add any extra thing more.

This should be the accepted answer.

This worked for me. I was trying mr-auto as suggested above, and it did not work. Adding ml-auto fixed it for me.

Worked for me too, thx. Side note: Not sure but with Bootstrap 4 I think that nav class isn't needed anymore in ul. This would also work: <ul class="navbar-nav ml-auto">

Note
Rectangle 27 0

Bootstrap 4 navbar items on right side?


<ul class="nav navbar-nav ml-auto">

In version 4, it is easier. Just put a ml-auto class in the ul like so:

This is what seems correct. I didnt need add any extra thing more.

This should be the accepted answer.

This worked for me. I was trying mr-auto as suggested above, and it did not work. Adding ml-auto fixed it for me.

Worked for me too, thx. Side note: Not sure but with Bootstrap 4 I think that nav class isn't needed anymore in ul. This would also work: <ul class="navbar-nav ml-auto">

Note
Rectangle 27 0

Bootstrap 4 navbar items on right side?


<div class="collapse navbar-collapse justify-content-end" id="navbarText">
  <ul class="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="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

In Bootstrap 4 alpha-6 version, As navbar is using flex model, you can use justify-content-end in parent's div and remove mr-auto.

This works like a charm :)

Note