Bootstrap 4 navbar items on right side


Translate

This question already has an answer here:


All Answers
  • Translate

    TL;DR:

    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.

    Tested against Bootstrap v4.1.3

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/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;
        }
        
        /* Fixes dropdown menus placed on the right side */
        .ml-auto .dropdown-menu {
          left: auto !important;
          right: 0px;
        }
      </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="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">            Dropdown on Right</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action with a lot of text inside of an item</a>
          </div>
        </li>
      </ul>
    </nav>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    </body>
    </html>

  • Translate

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

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

  • Translate

    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/.

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

  • Translate

    Navbar expanded

    Navbar collapsed

    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

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

  • Translate

    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.

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

    This works like a charm :)


  • Translate

    With Bootstrap v4.0.0-alpha.6: Two <ul>s (.navbar-na), one with .mr-auto and one with .ml-auto:

    <nav ...> 
      ...     
      <div class="collapse navbar-collapse">
        <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="#">Left Link </a>
          </li>
        </ul>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Right Link </a>
          </li>
        </ul>
      </div>
    </nav>
    

  • Translate

    In my case, I was looking for a solution that allows one of the navbar items to be right aligned. In order to do this, you must add style="width:100%;" to the <ul class="navbar-nav"> and then add the ml-auto class to your navbar item.


  • Translate

    Here and easy Example.

    <!-- Navigation bar-->
    
    <nav class="navbar navbar-toggleable-md bg-info navbar-inverse">
        <div class="container">
            <button class="navbar-toggler" data-toggle="collapse" data-target="#mainMenu">
                <span class="navbar-toggler-icon"></span>
                </button>
            <div class="collapse navbar-collapse" id="mainMenu">
                <div class="navbar-nav ml-auto " style="width:100%">
                    <a class="nav-item nav-link active" href="#">Home</a>
                    <a class="nav-item nav-link" href="#">About</a>
                    <a class="nav-item nav-link" href="#">Training</a>
                    <a class="nav-item nav-link" href="#">Contact</a>
                </div>
            </div>
        </div>
    </nav>