I have a navbar programmed with bootstrap 5 and as you can see in the picture I just want to move the last three nav-items to the right.
I have already tried ms-auto, which resulted in all my nav-items being moved to the right, but I only want to move three to the right.
ms-auto
2
Try using 2 ul classes:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <!-- Navigation--> <nav class="navbar navbar-expand-md navbar-dark bg-primary"> <div class="container-fluid"> <a class="navbar-brand abs" href="#">Navbar 1</a> <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse" id="collapseNavbar"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="//codeply.com">Codeply</a> </li> <li class="nav-item"> <a class="nav-link" href="#myAlert" data-bs-toggle="collapse">Link</a> </li> </ul> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="" data-bs-target="#myModal" data-bs-toggle="modal">About</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="//codeply.com">Codeply</a> </li> </ul> </div> </div> </nav>
To move the last three navigation items to the right, you can split the navigation items into two separate ul elements. The ul containing the right-aligned items should have the class ms-auto.
ul
<nav class="navbar navbar-expand-lg"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <!-- left aligned items --> </ul> <ul class="navbar-nav ms-auto"> <!-- right aligned items --> </ul> </div> </div> </nav>
Click here to cancel reply.
2
Answers
Try using 2 ul classes:
To move the last three navigation items to the right, you can split the navigation items into two separate
ul
elements. Theul
containing the right-aligned items should have the classms-auto
.