How to align avatar in a navbar to the right?

December 20, 2022

Here’s the navbar

<nav class="navbar navbar-expand-md navbar-dark bg-dark static-top">
    <button class="navbar-toggler" type="button" data-toggle="collapse">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">item1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">item2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">item3</a>
            </li>
            {% if request.user.is_authenticated %}
                {% if request.user.is_superuser %}
                    <li class="nav-item">
                        <a class="nav-link" href={% url 'admin:index' %}>Admin</a>
                    </li>
                {% endif %}
                <img src="https://mdbcdn.b-cdn.net/img/new/avatars/2.webp"
                     class="rounded-circle" style="width: 40px; margin-right: auto"
                     alt="Avatar"/>
            {% else %}
                <li class="nav-item">
                    <a class="nav-link" href={% url 'signin' %}>Sign in</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href={% url 'signup' %}>Sign up</a>
                </li>
            {% endif %}
        </ul>
    </div>
</nav>

Here’s how it looks

I need the avatar aligned to the right. So far I tried:

style="width: 40px; display: flex; flex-direction: row-reverse"

and

style="width: 40px; align-self: stretch"

and

style="width: 40px; horiz-align: right"

and

style="width: 40px; display: -ms-inline-flexbox"

and

style="width: 40px; margin-right:10px;"

and the list goes on … Nothing works.

more details more details more details more details

>Solution :

When using bootstrap I usually drop a spacer element and give it a flex-grow of 1 to push everything to the left and right as follows:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-dark bg-dark static-top">
  <button class="navbar-toggler" type="button" data-toggle="collapse">
        <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav w-100">
      <li class="nav-item">
        <a class="nav-link" href="#">item1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">item2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">item3</a>
      </li>
      <!-- inserted sneaky spacer below -->
      <li class='flex-grow-1'></li>
      <img src="https://placekitten.com/40/40" class="rounded-circle" style="width: 40px;" alt="Avatar" />
      <li class="nav-item">
        <a class="nav-link" href={% url 'signin' %}>Sign in</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href={% url 'signup' %}>Sign up</a>
      </li>
    </ul>
  </div>
</nav>