Bootstrap Nav item won't float right

Question

I've been trying to make my nav-items in my ul float right. I've tried many different things, including everything in this thorough answer: Bootstrap 4 align navbar item to the right

The nav item stays stuck left.

I feel, at this point, that I'm missing something obvious? The div class that wraps the list items are newly added, and don't seem to have any effect on how the list item behaves as far as I know. Everything I've tried has also been without those div tags, just for reference.

Curious whether anyone can see a problem here?

    .navbar-default {
      background-color: white;
    }
    
    .navbar {
      display: flex;
      min-height: 50px;
      border-bottom: 1px solid black;
      align-items: center;
      margin-bottom: 0;
    }
    
    
    .profile-dropdown {
      border-radius: 50%;
      height: 50px;
      width: 50px;
      border: 1px solid black;
      object-fit: cover;
    }

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    
      <a class="navbar-brand" href="#">Equilibrium</a>
    <!-- If the user is logged in, display a profile icon. -->
    
      <ul class="nav navbar-nav mr-auto">
    
     
          <li class="nav-item">
            <a>
              <img src="" class="profile-dropdown" alt="">
            </a>
          </li>
      
          <li class="nav-item" >
            <img src="/assets/glyphicons/user.png" class="profile-dropdown" alt="">
          </li>
   
    
      </ul>
    
    </nav>

I appreciate any help. Thanks.

Answer 1

Your question says that you want to align items to right. For that, you have to add ml-auto instead of mr-auto. It will keep all items aligned to right.

Answer 2

I'm posting an example here of a working navbar for Bootstrap 4. This should point you in the right direction. If you still have any questions, ask in the comments.

As you can see the mr-auto class works here perfectly. It pushes the content on the right to the other side. (mr-auto = "margin-right: auto")

Here's the working code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <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="#">Link</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
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
        <a class="navbar-brand" href="#">
            <p><i class="fa fa-user" aria-hidden="true"></i></p>
        </a>
    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>