Align nav content partially to left and right with Bootstrap 5-CodePudding

I have a Navbar and i am trying to align the some Links to Left and some to right. I tried it with two lists one with class "ms-auto" and "me-auto" but this did not worked (everything is always on the left, see picture). In a nutshell, I want to have the "Dropdown" Item on the right of the Navbar and the rest on the left.

 <nav >
        <div  id="navbarSupportedContent">
            <a  href="/">Company</a>

            <ul >
                <li ><a href="/" >Home</a></li>
                <li ><a href="/Home/About" >About</a></li>
                <li ><a href="/Home/Contact" >Contact</a></li>
                
            </ul>
            <ul >
                <li >
                    <a  href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Dropdown
                    </a>    
                </li>
            </ul>
        </div>
    </nav>

CodePudding user response：

I added a couple of divs to contain the logo with the left items. Then just some flex and margin classes.

<nav >
    <div  id="navbarSupportedContent">
       <div > 
            <a  href="/">Company</a>

            <ul >
                <li ><a href="/" >Home</a></li>
                <li ><a href="/Home/About" >About</a></li>
                <li ><a href="/Home/Contact" >Contact</a></li>
                
            </ul>
       </div>
        <div >
            <ul >
                <li >
                    <a  href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Dropdown
                    </a>    
                </li>
            </ul>
        </div>
    </div>
</nav>

CodePudding user response：

I have tried and i did it using only margin rights (me-auto & me-0):

<ul >...</ul>
<ul >...</ul>

To center the middle one just dont specify margins at middle ul:

<ul >...</ul>
<ul >...</ul>