Bootstrap: How to have two dropdown items in the same row-CodePudding

I'm trying to create a login form in a Bootstrap's navbar dropdown and I want the lowest item to be two items, in the same row split in half(login/register) But I can't get it done

here's what it looks like

the dropdown section:

<li >
    <a  href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
        aria-expanded="false">
        Login
    </a>
    <ul  aria-labelledby="navbarDropdown">
        <div >
            <form method="POST" , enctype="multipart/form-data" action="{% url 'login' %}">
                {% csrf_token %}
                <li><input type="text" name="username" placeholder="Username"
                        ></li>
                <li><input type="password" name="password" placeholder="Password"
                        ></li>
                <li>
                    <hr >
                </li>
                <li>
                    <button >Login</button>
                    <a href="{% url 'signup' %}" >Register</a>
                </li>
            </form>
        </div>
    </ul>
</li>

CodePudding user response：

Can you please make it easy to understand please, What acctually you want to do

CodePudding user response：

Add style="display: inline-block;" to your link

<li >
    <a  href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
        aria-expanded="false">
        Login
    </a>
    <ul  aria-labelledby="navbarDropdown">
        <div >
            <form method="POST" , enctype="multipart/form-data" action="{% url 'login' %}">
                {% csrf_token %}
                <li><input type="text" name="username" placeholder="Username"
                        ></li>
                <li><input type="password" name="password" placeholder="Password"
                        ></li>
                <li>
                    <hr >
                </li>
                <li>
                    <button >Login</button>
                    <a href="{% url 'signup' %}" style="display: inline-block;" >Register</a>
                </li>
            </form>
        </div>
    </ul>
</li>