-1

I'm pretty new with Bootstrap 5 and got stuck on a simple thing. How can I align cart and look to the right and keep everything else centered? Thank you

    <ul class="nav justify-content-center">
        <li class="nav-item">
            <a class="nav-link" aria-current="page" href="#">HOME</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">ABOUT US</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">SERVICES</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">PAGES</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">PROJECTS</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">NEWS</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">SHOP</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">CONTACT</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">cart</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">look</a>
        </li>
    </ul>
lisov1y
  • 11
  • 3

1 Answers1

0

If I were you I would section off those two list items into their own unordered list tags and then use absolute positioning on the second one to move it to the right like so:

<div class="nav justify-content-center">
  <ul class="nav justify-content-center">
    <li class="nav-item">
        <a class="nav-link" aria-current="page" href="#">HOME</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">ABOUT US</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">SERVICES</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">PAGES</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">PROJECTS</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">NEWS</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">SHOP</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">CONTACT</a>
    </li>
</ul>
<ul class="nav justify-content-end position-absolute" style="right: 0;">
    <li class="nav-item">
        <a class="nav-link" href="#">cart</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">look</a>
    </li>
</ul>
</div>
zbarnz
  • 13
  • 2