I am attempting to design a login form within a Bootstrap navbar dropdown. My goal is to have the bottom item display two items side by side in the same row (login/register), but I am struggling to achieve this.
You can view what it currently looks like here.
Here is the section for the dropdown:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Login
</a>
<ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end bg-dark" aria-labelledby="navbarDropdown">
<div class="form-group">
<form method="POST" , enctype="multipart/form-data" action="{% url 'login' %}">
{% csrf_token %}
<li><input type="text" name="username" placeholder="Username"
class="form-control bg-dark border-0 text-light"></li>
<li><input type="password" name="password" placeholder="Password"
class="form-control bg-dark border-0 text-light"></li>
<li>
<hr class="dropdown-divider border-top border-secondary">
</li>
<li>
<button class="dropdown-item btn btn-dark border-0 d-inline-block">Login</button>
<a href="{% url 'signup' %}" class="dropdown-item btn btn-dark border-0 d-inline-block">Register</a>
</li>
</form>
</div>
</ul>
</li>