Prueba esto:

 <div class="d-flex flex-row-reverse bd-highlight"> <div class="p-2 bd-highlight">Flex item 1</div> <div class="p-2 bd-highlight">Flex item 2</div> <div class="p-2 bd-highlight">Flex item 3</div> </div>

Donde tienes esto:

 <!-- NAVIGATION --> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="d-flex flex-grow-1"> //modify this to include flex-row-reverse

El código de mi Codeply de ejemplo usa Bootstrap 4, pero su código usa Bootstrap 5 beta. Si echas un vistazo a las nuevas clases de utilidad de espaciado de Bootstrap 5 , verás que...

• l (izquierda) ha sido reemplazada por s ( inicio )
• r (derecha) ha sido reemplazada por e ( fin )

¿Por qué el margen izquierdo (ml-*) no funciona en Bootstrap 5?

ml-auto ya no existe, y el equivalente de Bootstrap 5 sería ms-auto :

 <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="d-flex flex-grow-1"> <span class="w-100 d-lg-none d-block"> <!-- hidden spacer to center brand on mobile --></span> <a class="navbar-brand d-none d-lg-inline-block" href="#"> Navbar 6 </a> <a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="#"> <img src="//placehold.it/40?text=LOGO" alt="logo"> </a> <div class="w-100 text-right"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar"> <span class="navbar-toggler-icon"></span> </button> </div> </div> <div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar"> <ul class="navbar-nav ms-auto flex-nowrap"> <li class="nav-item"> <a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a> </li> <li class="nav-item"> <a href="#" class="nav-link m-2 menu-item">How We Help</a> </li> <li class="nav-item"> <a href="#" class="nav-link m-2 menu-item">Blog</a> </li> <li class="nav-item"> <a href="#" class="nav-link m-2 menu-item">Contact</a> </li> </ul> </div> </nav>

Demostración: https://codeply.com/p/zzFC5XoyUm

¿Por qué el margen derecho (mr-*) no funciona en Bootstrap 5?

Además, mr-auto ha sido reemplazado por me-auto .

Aquí puede leer por qué Bootstrap 5 utiliza el enfoque de start y end para mejorar la compatibilidad con RTL, ya que left y right son absolutas, mientras que el start y el end son relativos.

Las utilidades de flexbox como justify-content-end también se pueden usar como se explica aquí

no use j ustify-content-end use ms-auto
usar para m- margin y p-padding

• t - para clases que establecen margin-top o padding-top
• b - para clases que establecen margin-bottom o padding-bottom
• s - para clases que establecen margin-left o padding-left en LTR, margin-right o padding-right en RTL
• e - para clases que establecen margin-right o padding-right en LTR, margin-left o padding-left en RTL
• x - para clases que configuran tanto *-left como *-right
• y - para clases que establecen tanto *-top como *-bottom

Para aquellos que comenzaron a usar Bootstrap 5 (versión beta), hay pequeños cambios en los nombres de las clases.

"Izquierda" se reemplaza por "inicio" y "derecha" se reemplaza por "final" en todas partes en el arranque.

Por ejemplo, en bootstrap 4, teníamos ml-auto pero en bootstrap 5, tenemos que usar ms-auto y de manera similar para mr, tenemos a mí.

Y lo mismo se aplica para cada clase en bootstrap, ya sea que "izquierda" y "derecha" estén representadas por "l" y "r", fueron reemplazadas por "s" y "e" y si se usan en cualquier lugar como palabras completas (izquierda y derecha) fueron reemplazados por "inicio" y "final"

De hecho, probé un enfoque diferente, aunque inspirado en algunas de estas publicaciones anteriores a la mía. Solo quería alinear algunos botones (los botones Mi perfil e Inicio de sesión) en mi barra de navegación a la derecha mientras mantenía todos los demás a la izquierda en la barra de navegación.

Siga este proceso

1. Establecer la posición de la barra de navegación como relativa usando position-relative
2. Coloque los botones que desea alinear a la derecha en un <ul> separado
3. Establezca el <ul> posicionado absoluto y al final así: <ul class="navbar-nav position-absolute end-0 mx-3">
4. Cree un <li> vacío antes del <ul> que acaba de crear para mantener el espacio al reducir la pantalla (ya que los elementos absolutos se superpondrán con otros elementos estáticos y relativos).
5. Establezca el ancho igual al <ul> alineado a la derecha (descúbralo usando el elemento de inspección de Chrome). Por ejemplo <li class="nav-item" style="width: 150px"></li>

Mi código como ejemplo.

 {# Create Navbar #} <nav class="navbar navbar-expand-md navbar-dark bg-dark position-relative mb-4"> <div class="container-fluid"> <a class="navbar-brand" href="{{ path('home') }}"> <img src="/favicon/android-chrome-192x192.png" alt="Logo" style="height: 50px; width: 50px"> Company Name </a> <button class="navbar-toggler" type="button" data-coreui-toggle="collapse" data-coreui-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> <li class="nav-item"> <a class="nav-link" aria-current="page" href="{{ path('home') }}">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="{{ path('guide_home') }}">Guide</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">About us</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Blog</a> </li> {# Invisible div to prevent overlap of absolute positioned elements #} <li class="nav-item" style="width: 150px"></li> <ul class="navbar-nav position-absolute end-0 mx-3"> {# Create a login or logout link depending whether a user is logged in or not #} {% if app.user %} <li class="nav-item"> <a class="nav-link" href="{{ path('profile_home') }}">My Profile</a> </li> <li class="nav-item"> <a class="nav-link" href="{{ path('app_logout') }}">Logout</a> </li> {% else %} <li class="nav-item"> <a class="nav-link" href="{{ path('app_login') }}">Login/Register</a> </li> {% endif %} </ul> </ul> </div> </div> </nav>

En general

Encontré esto un poco más fácil de entender en comparación con otras soluciones que he visto y pude hacer que funcionara más fácilmente. Espero que esto sea útil para cualquier otra persona que se encuentre con esta publicación. Comente si tiene algún comentario sobre mi método y si tiene alguna mejora. ¡Gracias! :)

Nota: mi ejemplo está hecho en un proyecto Symfony usando plantillas twig en caso de que encuentre confusa alguna de las sintaxis. Sin embargo, todo el HTML es el mismo para cualquier herramienta de desarrollo.