How to align avatar in a navbar to the right? - html

Question

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

Answer 1

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>