Bootstrap4 adjacent navbar columns [closed] - css

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
Here is my code:
<nav class="navbar navbar-expand-lg navbar-light bg-light" role="navigation" id="navbar">
<div class="container">
<a class="navbar-brand mynav" href="{% url 'home' %}">Star Social</a>
<ul class="navbar-nav navbar-right">
{% if user.is_authenticated %}
<li>Posts</li>
<li>Groups</li>
<li>Create Group</li>
<li>Logout</li>
{% else %}
<li>Group</li>
<li>Login</li>
<li>Signup</li>
{% endif %}
</ul>
</div>
</nav>
I have a code like this but when I run the server, I'm getting style like this.

Answer 1

In Your bootstrap code tag you forgot to add class in <li> and <a> and you must replace the class in ul tag navbar-right to ml-auto here i will change
<nav class="navbar navbar-expand-lg navbar-light bg-light" role="navigation" id="navbar">
<a class="navbar-brand" href="{% url 'home' %}">Star Social</a>
<ul class="navbar-nav ml-auto">
<!-- {% if user.is_authenticated %} -->
<li class="nav-item active"><a class="nav-link" href="">Posts</a></li>
<li class="nav-item"><a class="nav-link" href="">Group</a></li>
<li class="nav-item"><a class="nav-link" href="">Create Group</a></li>
<li class="nav-item active"><a class="nav-link" href="{% url 'accounts:logout' %}">Logout</a></li>
<!-- {% else %} -->
<li class="nav-item"><a class="nav-link" href="">Group</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'accounts:login' %}">Login</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'accounts:signup' %}">Signup</a></li>
<!-- {% endif %} -->
</ul>
</nav>
Above try but it not collapse if you want do same please refer a docs of bootstrap here i give link Bootstrap Navbar it work make right so let me know